Angular-cli: EXCEPTION: No provider for t! in production build only

Created on 16 Feb 2017  Â·  34Comments  Â·  Source: angular/angular-cli

Please provide us with the following information:

OS?

OS X 10.11.6

Versions.

@angular/cli: 1.0.0-beta.31
node: 6.9.5
os: darwin x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.31
@angular/compiler-cli: 2.4.7

Repro steps.

My repo is here:
https://github.com/scottschafer/BowlBlaster.git

If I run "ng serve", the application works just fine. However, if I deploy to github pages, or just use "ng serve -prod", I get a series of cryptic errors in the browser log.

The log given by the failure.

EXCEPTION: No provider for t!
t.handleError @ vendor.b857c3e….bundle.js:435
vendor.b857c3e….bundle.js:435 ORIGINAL STACKTRACE:
t.handleError @ vendor.b857c3e….bundle.js:435
vendor.b857c3e….bundle.js:435 Error: DI Error
at e.d (polyfills.1ea585f….bundle.js:37)
at e [as constructor] (vendor.b857c3e….bundle.js:260)
at e [as constructor] (vendor.b857c3e….bundle.js:752)
at new e (vendor.b857c3e….bundle.js:752)
at t._throwOrNull (vendor.b857c3e….bundle.js:1121)
at t._getByKeyDefault (vendor.b857c3e….bundle.js:1121)
at t._getByKey (vendor.b857c3e….bundle.js:1121)
at t.get (vendor.b857c3e….bundle.js:1121)
at e.get (vendor.b857c3e….bundle.js:456)
at e.t.injectorGet (vendor.b857c3e….bundle.js:127)
at e.createInternal (main.6bd317a….bundle.js:2)
at e.t.createHostView (vendor.b857c3e….bundle.js:127)
at t.create (vendor.b857c3e….bundle.js:78)
at e.bootstrap (vendor.b857c3e….bundle.js:246)
at vendor.b857c3e….bundle.js:246
t.handleError @ vendor.b857c3e….bundle.js:435
vendor.b857c3e….bundle.js:435 EXCEPTION: Uncaught (in promise): Error: DI Error
Error: DI Error
at e.d (https://scottschafer.github.io/BowlBlaster/polyfills.1ea585f55bc1325fd989.bundle.js:37:2213)
at e [as constructor] (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:260:508)
at e [as constructor] (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:752:228)
at new e (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:752:555)
at t._throwOrNull (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:1121:2766)
at t._getByKeyDefault (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:1121:3104)
at t._getByKey (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:1121:2485)
at t.get (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:1121:848)
at e.get (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:456:1144)
at e.t.injectorGet (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:127:1750)
at e.createInternal (https://scottschafer.github.io/BowlBlaster/main.6bd317a007068db26aa0.bundle.js:2:2039)
at e.t.createHostView (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:127:1288)
at t.create (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:78:1949)
at e.bootstrap (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:246:4321)
at https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:246:2567
t.handleError @ vendor.b857c3e….bundle.js:435
vendor.b857c3e….bundle.js:435 ORIGINAL STACKTRACE:
t.handleError @ vendor.b857c3e….bundle.js:435
vendor.b857c3e….bundle.js:435 Error: Uncaught (in promise): Error: DI Error
Error: DI Error
at e.d (polyfills.1ea585f….bundle.js:37)
at e [as constructor] (vendor.b857c3e….bundle.js:260)
at e [as constructor] (vendor.b857c3e….bundle.js:752)
at new e (vendor.b857c3e….bundle.js:752)
at t._throwOrNull (vendor.b857c3e….bundle.js:1121)
at t._getByKeyDefault (vendor.b857c3e….bundle.js:1121)
at t._getByKey (vendor.b857c3e….bundle.js:1121)
at t.get (vendor.b857c3e….bundle.js:1121)
at e.get (vendor.b857c3e….bundle.js:456)
at e.t.injectorGet (vendor.b857c3e….bundle.js:127)
at e.createInternal (main.6bd317a….bundle.js:2)
at e.t.createHostView (vendor.b857c3e….bundle.js:127)
at t.create (vendor.b857c3e….bundle.js:78)
at e.bootstrap (vendor.b857c3e….bundle.js:246)
at vendor.b857c3e….bundle.js:246
at d (polyfills.1ea585f….bundle.js:37)
at f (polyfills.1ea585f….bundle.js:37)
at polyfills.1ea585f….bundle.js:37
at t.invokeTask (polyfills.1ea585f….bundle.js:37)
at Object.onInvokeTask (vendor.b857c3e….bundle.js:197)
at t.invokeTask (polyfills.1ea585f….bundle.js:37)
at e.runTask (polyfills.1ea585f….bundle.js:37)
at i (polyfills.1ea585f….bundle.js:37)
t.handleError @ vendor.b857c3e….bundle.js:435
polyfills.1ea585f….bundle.js:37 Unhandled Promise rejection: No provider for t! ; Zone: angular ; Task: Promise.then ; Value: e Error: DI Error
at e.d (https://scottschafer.github.io/BowlBlaster/polyfills.1ea585f55bc1325fd989.bundle.js:37:2213)
at e [as constructor] (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:260:508)
at e [as constructor] (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:752:228)
at new e (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:752:555)
at t._throwOrNull (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:1121:2766)
at t._getByKeyDefault (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:1121:3104)
at t._getByKey (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:1121:2485)
at t.get (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:1121:848)
at e.get (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:456:1144)
at e.t.injectorGet (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:127:1750)
at e.createInternal (https://scottschafer.github.io/BowlBlaster/main.6bd317a007068db26aa0.bundle.js:2:2039)
at e.t.createHostView (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:127:1288)
at t.create (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:78:1949)
at e.bootstrap (https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:246:4321)
at https://scottschafer.github.io/BowlBlaster/vendor.b857c3eb223ff6ce7021.bundle.js:246:2567
o @ polyfills.1ea585f….bundle.js:37
polyfills.1ea585f….bundle.js:37 d

Most helpful comment

I don't know why this is considered a bug with just the package and not with the system. The point of using typescript is to catch stuff earlier, ie at compile time rather than run time. This is a runtime bug on production builds only - the worst place to trying to track it down. The angular2-cookie package isn't the only one doing it. I have an app currently doing this and I can't find the offender for the life of me as there are 50 some odd providers.

It seems to me that the optimizations of --aot are too aggressive if otherwise valid code is now broken.

All 34 comments

Also having the same issue. Had it with Beta 31 too.

BTW, I tried downgrading to an earlier version of the CLI but the problem persists:
@angular/cli: 1.0.0-beta.29
node: 6.9.5
os: darwin x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.29
@angular/compiler-cli: 2.4.7

same issue

@angular/cli: 1.0.0-beta.32.3
node: 7.3.0
os: darwin x64

having the same issue

@angular/cli": "1.0.0-beta.32.3
node: v6.9.2
os: Window10 x64

Having the same issue.

@angular/cli": "1.0.0-beta.32.3
node: v7.5.0
os: macOS Sierra

We are also having this issue on Windows 10 with the --prod build flag (Node 6.9.5, @angular/cli 1.0.0-beta.30). It worked perfectly until we added a new node module (used npm install to add angular2-cookie) to the project.

The dev build still works, but with the production build we get the "EXCEPTION: No provider for t!" error. It looks like "t" might be a minified call to the new module- maybe it's not making it into the bundle? Further down the error we get:

"at t.get [as _CookieService_58] (main.6965705….bundle.js:4)"

CookieService is what we set up to manage the new node module we added.

Yes, I was also using https://www.npmjs.com/package/angular2-cookie. I
removed it from my project and now the distribution build
https://scottschafer.github.io//BowlBlaster// works.

On Wed, Feb 22, 2017 at 10:33 AM, Joseph Driscoll notifications@github.com
wrote:

We are also having this issue on Windows 10 with the --prod build flag
(Node 6.9.5, @angular/cli 1.0.0-beta.30). It worked perfectly until we
added a new node module (used npm install to add angular2-cookie) to the
project.

The dev build still works, but with the production build we get the
"EXCEPTION: No provider for t!" error. It looks like "t" might be a
minified call to the new module- maybe it's not making it into the bundle?
Further down the error we get:

"at t.get [as _CookieService_58] (main.6965705….bundle.js:4)"

CookieService is what we set up to manage the new node module we added.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/4752#issuecomment-281759184,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA5RaW82G4LnnfFGtnnGz7RInDBYJZdaks5rfH95gaJpZM4MDSet
.

Not an issue with the CLI. Take a look here: https://github.com/salemdar/angular2-cookie/issues/37.

Thanks @ReidBraswell! The advice on that issue did work to get angular2-cookie working for our project.

Thanks @ReidBraswell ! The advice on that issue did work for me as well!

I'm still not sure exactly where the issue is, but it does seem like a problem to me when code runs fine in development but blows up cryptically in production. Even though there's a workaround, this feels like a bug to me.

@scottschafer the CLI for prod not uses AOT compilation not JIT, and with Angular 2.4.x a few things changed with the compilation process. angular2-cookie has not updated for compatibility with the Angular changes. That's how I understand it.

Closing as per @ReidBraswell's comment https://github.com/angular/angular-cli/issues/4752#issuecomment-281791994

BTW, for anyone who finds this, switch to https://github.com/salemdar/ngx-cookie it replaces angular2-cookie.

FYI - In my case this problem was caused by angular2-logger. See https://stackoverflow.com/a/43410786/156477 for the fix.

I don't know why this is considered a bug with just the package and not with the system. The point of using typescript is to catch stuff earlier, ie at compile time rather than run time. This is a runtime bug on production builds only - the worst place to trying to track it down. The angular2-cookie package isn't the only one doing it. I have an app currently doing this and I can't find the offender for the life of me as there are 50 some odd providers.

It seems to me that the optimizations of --aot are too aggressive if otherwise valid code is now broken.

i had the same issue with angualr2 cookie but after moving to ngx-cookie the issue was resolved.

i have the same issue but i don't work with cookie. I agree with bmansfie and I wish to know how deal with it

sorry but I didn't understand what I should downgrade? angular or angular compiler?

@san4ezz87 Angular! They broke something on the latest 4.4.1.
4.3.6 is the last working one.

thanks )

I'm having this issue too but I'm not using angular2-cookie, and my Angular version is 4.3.6.

Having the same issue but I also not using cookie
I've no problems in ng serve
no problems in ng build --prod

the issue appears in production on my IIS server... ofc I've configured my web.config correctly. I dont understand where this problem comes from :-/.

"dependencies": {
    "@angular/animations": "^4.4.1",
    "@angular/common": "^4.4.1",
    "@angular/compiler": "^4.4.1",
    "@angular/core": "^4.4.1",
    "@angular/forms": "^4.4.1",
    "@angular/http": "^4.4.1",
    "@angular/platform-browser": "^4.4.1",
    "@angular/platform-browser-dynamic": "^4.4.1",
    "@angular/router": "^4.4.1",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
    "animate.css": "^3.5.2",
    "core-js": "^2.5.1",
    "file-saver": "^1.3.3",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "ng-selectize": "^1.1.0",
    "ngx-bootstrap": "^1.9.3",
    "ngx-toastr": "^5.3.1",
    "pdfjs-dist": "^1.9.573",
    "primeng": "^4.2.1",
    "rxjs": "^5.4.3",
    "selectize": "^0.12.4",
    "stacktrace-js": "^2.0.0",
    "sweetalert2": "^6.9.0",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.8.17"
  },
  "devDependencies": {
    "@angular/cli": "^1.4.2",
    "@angular/compiler-cli": "^4.4.1",
    "@compodoc/compodoc": "^1.0.1",
    "@types/jasmine": "2.5.41",
    "@types/node": "^8.0.28",
    "codelyzer": "^3.2.0",
    "jasmine-core": "~2.7.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "^5.1.2",
    "ts-node": "^3.3.0",
    "tslint": "^5.7.0",
    "typescript": "^2.5.2",
    "uglify-js": "^2.8.29"
  }
vendor.e9e74ef7006e2501b94f.bundle.js:1 Unhandled Promise rejection: No provider for e! ; Zone: angular ; Task: Promise.then ; Value: Error: No provider for e!
    at x (vendor.e9e74ef7006e2501b94f.bundle.js:1)
    at E (vendor.e9e74ef7006e2501b94f.bundle.js:1)
    at t._throwOrNull (vendor.e9e74ef7006e2501b94f.bundle.js:1)
    at t._getByKeyDefault (vendor.e9e74ef7006e2501b94f.bundle.js:1)
    at t._getByKey (vendor.e9e74ef7006e2501b94f.bundle.js:1)
    at t.get (vendor.e9e74ef7006e2501b94f.bundle.js:1)
    at Ue (vendor.e9e74ef7006e2501b94f.bundle.js:1)
    at t.get (vendor.e9e74ef7006e2501b94f.bundle.js:1)
    at kn (vendor.e9e74ef7006e2501b94f.bundle.js:1)
    at xn (vendor.e9e74ef7006e2501b94f.bundle.js:1) Error: No provider for e!
    at x (http://localhost:8201/vendor.e9e74ef7006e2501b94f.bundle.js:1:21760)
    at E (http://localhost:8201/vendor.e9e74ef7006e2501b94f.bundle.js:1:21987)
    at t._throwOrNull (http://localhost:8201/vendor.e9e74ef7006e2501b94f.bundle.js:1:89022)
    at t._getByKeyDefault (http://localhost:8201/vendor.e9e74ef7006e2501b94f.bundle.js:1:89355)
    at t._getByKey (http://localhost:8201/vendor.e9e74ef7006e2501b94f.bundle.js:1:88740)
    at t.get (http://localhost:8201/vendor.e9e74ef7006e2501b94f.bundle.js:1:87148)
    at Ue (http://localhost:8201/vendor.e9e74ef7006e2501b94f.bundle.js:1:39092)
    at t.get (http://localhost:8201/vendor.e9e74ef7006e2501b94f.bundle.js:1:137864)
    at kn (http://localhost:8201/vendor.e9e74ef7006e2501b94f.bundle.js:1:45851)
    at xn (http://localhost:8201/vendor.e9e74ef7006e2501b94f.bundle.js:1:44357)

@cdskill like @srcn pointed out, have a look at angular/angular#19219

There is most likely going to be a fix very soon for this. As a workaround downgrade to [email protected]

@cdskill @Shadowlauch was pulling my hair out on this today. Looks like it just got resolved 5 hours ago with 4.4.3. Haven't looked into what the commit entailed, but so glad it's resolved (for now at least)

I finally fixed this error, it was the @angular2-notifications package that was badly imported by PhpStorm.

When I use PhpStorm auto import it uses the import like this:
import { NotificationsService } from "angular2-notifications/dist";

I just removed the /dist and it worked ! Don't know why PhpStorm does this and I hope it will be fixed ..

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!


Try this. It worked for me
npm outdated - to see discrepancies
npm update - to resolve discrepancies

@srix55 For others who want to use your solution, they may find the file here:
.\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\common.js

Small reminder, I believe if you use the command ng build --prod, you can avoid the platformBrowser vs platformBrowserDynamic; I use platformBrowserDynamic.

(@srix55 ' suggestion helped me to see the error StaticInjectorError(Platform: core)[CompilerFactory]: NullInjectorError: No provider for CompilerFactory! . I fixed it by reverting to platformBrowserDynamic)

Cannot pinpoint because when I comment out "new UglifyJSPlugin" I get TypeError: Cannot read property 'apply' of undefined from tapable.js

problem with:
angular 5.2.0
angular-cli: 1.7.3

main.bundle.js:
ERROR Error: StaticInjectorError(Ot)[t -> t]:
StaticInjectorError(Platform: core)[t -> t]:
NullInjectorError: No provider for t!
(core.js.pre-build-optimizer.js:1003)

This did works to look my issue, in the file .\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\common.js

// line 206
/*extraMinimizers.push(new TerserPlugin({
   sourceMap: scriptsSourceMap,
   parallel: true,
   cache: true,
   terserOptions,
}));*/

I had a similar issue, after commenting the minimizing section this was the error :

Error: StaticInjectorError(AppModule)[NgbModal -> ContentRef]: 
  StaticInjectorError(Platform: core)[NgbModal -> ContentRef]: 

Upgrading @ng-boostrap/ng-boostrap to the latest version fixed my issue.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings