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.

Sitnik

Try doing your compilation with the --aot. – Rufusrug

@BoyanKostadinov: is it with or without --aot? If it is without --aot, I have already tried with --aot and hosted the app in IIS and it worked – Sitnik

Then it's an issue with your build on the Jenkins server. – Rufusrug

@BoyanKostadinov Thank you for your reply, I found the issue. I was using ng2-Toastr in my application which was causing this dependency issue. Removing the toastr solved the issue. – Sitnik

i am having the same issue but i am not using any ng2-Toastr ... – Betty

@Prasannavenkatesan.j just to give you some knowledge don't put the minified error messages because after minification all the variable names are uglified like 'SampleVariable' will become t. so run your applicartion before minification and uglification process. Will give much more clear view that whats wrong. regards – Arista

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.

Advisory

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

Behindhand

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!

Traipse

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!

Haggard