Check out our Angular Book Series.

How do I Fix Uncaught (in promise): Error: StaticInjectorError[] in Angular 5?

I've updated my Learn With Programming Books to Angular 5. Angular changed their versioning structure, so Angular 5 is more like Angular 2.2 than a complete update.

Unfortunately, the upgrade was not seamless and this error drove me insane. Everything I thought I'd fix it, it would crop back up:


ERROR Error: Uncaught (in promise): Error: StaticInjectorError[UserModel]:
StaticInjectorError[UserModel]:
NullInjectorError: No provider for UserModel!
Error: NullInjectorError: No provider for UserModel!
at _NullInjector.get (injector.js:31) [angular]
etc.. etc..

The error looked like this:

The underlying cause of this error is that Angular 5 changed how they create providers moving from a reflect based injector to a static injector. This removes the need for the reflect polyfill that is used in Angular applications. Without digging deep into Angular code I can't explain better, all I knew was that I had the error and needed a resolution.

If you search, you'll find a lot of write ups on this, but it was trial and error that solved the issue for me. Here are two things to look at that helped me solve the issue.

Check Your TypeScript Version

Angular 5 requires TypeScript 2.3 or later, so make sure that your build scripts have the proper version installed. I'm using TypeScript 2.4, and your package.json should look something like this:


"typescript": "^2.4.0",

If you're using the Angular CLI this shouldn't be an issue, as it should already have the proper versions set up.

Check Case Sensitivity of Classes and Imports

This is the one that drove me nuts. About half of my development standards come from 'legacy' applications, and the rule of thumb used to be to name class files in proper case, so UserModel.ts instead of usermodel.ts. However, it appears--and I'm not sure why--that Angular has a problem with the mixed case of the class imports. If I was importing two classes from the same directory and setting them up as providers in the main application, I would get this error.

This would cause errors:


import {UserModel} from "../model/UserModel";
import {TaskModel} from "../model/TaskModel";


@NgModule({
// other stuff here
providers : [ UserModel, TaskModel]
})

This would not:


import {UserModel} from "../model/usermodel";
import {TaskModel} from "../model/taskmodel";


@NgModule({
// other stuff here
providers : [ UserModel, TaskModel]
})

Even if I changed nothing with the actual import files. By putting all the class imports in lower case, I was able to avoid the issue.

That was until I set up unit tests using karma-typescript. Karma TypeScript spit up on the imports with incorrect case. I ended up putting the file names in all lower case so they would be fine with my Angular Build Scripts and with the Karma TypeScript tests.

Final Thoughts

I thought the upgrade, and book update, would be a couple of days, but took me a full week. So, go check out my Angular 5 books, or at least get on my mailing list using the form below.

Keep up to date by reading DotComIt's Monthly Technical Newsletter

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.