Angular2/Ionic2: No provider for ….

When your developing an angular 2/ionic 2 application and you get the the following error:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: No provider for UserService!
ORIGINAL STACKTRACE:
Error: DI Exception
    at NoProviderError.BaseException [as constructor] (http://localhost:8100/build/js/app.bundle.js:2300:23)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:8100/build/js/app.bundle.js:27491:16)
    at new NoProviderError (http://localhost:8100/build/js/app.bundle.js:27528:16)
    at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/js/app.bundle.js:28516:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/js/app.bundle.js:28544:25)
    at ReflectiveInjector_._getByKey (http://localhost:8100/build/js/app.bundle.js:28507:25)
    at ReflectiveInjector_.get (http://localhost:8100/build/js/app.bundle.js:28316:21)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:29890:48)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:29890:48)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/js/app.bundle.js:28541:24)
ERROR CONTEXT:
[object Object]

Your module exists, it’s setup and your import is working. So what’s up? You need to make it available for your application. In your app.ts you have 2 approach’s add a new paramter to your @Component called providers that takes an array of modules.

Angular 2 (non-Ionic)

@Component({ 
  templateUrl: “build/app.html”,
  providers: [UserService],
})

For Ionic you can also just pass it into the ionicBootstrap function, the second parameter to that is an array of modules:

ionicBootstrap(ConnectApp, [UserService]);

Hope this helps!

Bad User Experiences and the Listerine Cap

Over the years I’ve gained more and more respect to the men and women who design our User Experiences. UX isn’t just for software, but everything you interact with, your keyboard, TV, fridge, the gear selection on your vehicle, all of those are UX interactions.

These interactions are vital to our use of a product, in extreme cases bad UX design can even cost lives. Your own unique products UX also trains the users the nuances of your product over time. Where you place buttons or interaction elements, the colors you use or even the textures.

Which brings me to a major UX failure that’s annoyed me to no end, the new Listerine Cap. Previous versions of that cap looked like this:

stain-remover2_0

The smooth section is where you place your fingers to squeeze the cap to release the child proof lock. Over years of using the product instinctively I knew what to do, so much so I could open the cap easily in the dark. Hopefully whoever designed this cap got a nice bonus.

Recently I bought some Listerine again and noticed immediately I was actually having difficulty opening the cap. I figured I was tried, distracted or whatever and moved on. But day after day I had the same trouble getting the cap off. It got to the point where after a long day driving a Water Tender around a Wildland fire I just hulked the cap off in a fit of rage. The issue, the cap design.

antiseptic_coolmint

The bottom section, where they put the logo, classy BTW, is smooth all the way around. From touch it’s almost impossible using coarse motor skills to identify, without looking, where you need to squeeze to open up the cap. Hopefully whoever designed this cap, most likely someone from marketing, gets a swift kick in the genital.

This small change has actually soured my opinion of the product, so much so that at least in the near future I won’t be buying it again. But it’s a powerful reinforcement, if something so minor can turn me off of a very cheap product, how many minor UX issues in my products have turned people off from buy decisions?

Ionic\Cordova EACCESS Error

ionic-logo-blogWhen your running the command “ionic run ios or ionic emulate ios” on a Mac you may be presented with the following error:

Error: spawn EACCES

The most common cause of this error is that the scripts in your hooks directory don’t have execute permission. You may also try removing and adding your ios provider. If that doesn’t work the other fix is to run the following command:

sudo find /path/to/your/app/hooks -type f -exec chmod +x {} \;

This will iterate over every file in your hooks directory and grant execute permission. Try running the run/emulate command again and the problem should be gone.

If you’re a First Responder or know one check out Resgrid which is a SaaS product utilizing Microsoft Azure, providing logistics, management and communication tools to first responder organizations like volunteer fire departments, career fire departments, EMS, search and rescue, CERT, public safety, disaster relief organizations.

Go to Top