Angular2 "No provider for t!" and Uncaught (in promise): Error: DI Error

Question

I've build a app in Angular 2, and have encountered a issue. I have used angular CLI to create my application, I have created my components and services using Angular CLI and I use " ng serve " to run the application locally and everything works fine. In order to create a build for PROD I'm using the command " ng build --Prod --base-href ./ --aot ", it creates a DIST folder and hosting the folder in IIS opens the application fine. When I check in the code to TFS there is a event which automatically creates DIST folder using jenkins and pushes the build to my server. Now if I browse the application for server it throws the following errors " No provider for t! " and Error: DI Error. I don't know what I'm doing wrong here.

Below are the screenshots of the error

Any help is much appreciated.

Answer 1

I was having the same problem. I was able to solve it by:

1. running ng serve -aot . I was able to find out what the missing class was as this is running AOT without running minify/uglify.
2. Once I did that I was able to look through the error context to figure out which component was having issues.
3. Go to the component in question and start removing references in the constructor (where the dependency resolution happens.

In my case, I was having a problem using the Logger class in the angular2-logger/core module. Once I removed the reference from the constructor and reran compilation, it worked like a charm. I then tested with ng serve -prod to confirm that was also fixed.

One thing I found was that I had to explicitly kill Angular CLI and rebuild. For some reason, when I modified one line and saved, it said it recompiled and was still broken. Only when I killed it and ran the command again did I figure out it was really fixed.

Answer 2

I had the same problem and the cause turned out to be a quirk in the angular2-logger library. This answer solved the problem for me

Answer 3

fixed ! in my case it was because the NotificationService for the angular2-notifications

the solution is just remove the NotificationService from the providers array inside you app module .

but still this is should be validated earlier by angular in AOT mode .

Thanks!

Answer 4

Here's one way to pinpoint the error - start by disabling the uglify plugin (which is automatically set for production) - and there's no way to do this with angular-cli. It can be temporarily commented out by searching for UglifyJSPlugin in node_modules directory. After finding it (in the common.js file), comment it out

/*              
// Temporarily comment out this part (in common.js of node_modules) to pinpoint the error
                new UglifyJSPlugin({
                    sourceMap: buildOptions.sourceMap,
                    parallel: true,
                    cache: true,
                    uglifyOptions,
                }),
              */

Build your app again and run. Then, a cryptic as heck error like this one

Unhandled Promise rejection: StaticInjectorError(ne)[t -> t]: 
  StaticInjectorError(Platform: core)[t -> t]: 
    NullInjectorError: No provider for t! ; Zone: <root> ; Task: Promise.then ; Value: Error: StaticInjectorError(ne)[t -> t]: 
  StaticInjectorError(Platform: core)[t -> t]: 
    NullInjectorError: No provider for t!

becomes

Unhandled Promise rejection: StaticInjectorError(AppModule)[TranslatorService -> Http]: 
  StaticInjectorError(Platform: core)[TranslatorService -> Http]: 
    NullInjectorError: No provider for Http! ; Zone: <root> ; Task: Promise.then ; Value: Error: StaticInjectorError(AppModule)[TranslatorService -> Http]: 
  StaticInjectorError(Platform: core)[TranslatorService -> Http]: 
    NullInjectorError: No provider for Http!