Components: Angular material 6.3.0 stop to work on build prod

[Toso82]

Bug, feature request, or proposal:

Stop to working on:

ng serve --prod

in ng serve work well

The application start with this error:

main.3cea331738aacf3015b8.js:1 ERROR Error: StaticInjectorError(Os)[t -> t]: 
  StaticInjectorError(Platform: core)[t -> t]: 
    NullInjectorError: No provider for t!
    at t.get (main.3cea331738aacf3015b8.js:1)
    at main.3cea331738aacf3015b8.js:1
    at t (main.3cea331738aacf3015b8.js:1)
    at t.get (main.3cea331738aacf3015b8.js:1)
    at main.3cea331738aacf3015b8.js:1
    at t (main.3cea331738aacf3015b8.js:1)
    at t.get (main.3cea331738aacf3015b8.js:1)
    at bi (main.3cea331738aacf3015b8.js:1)
    at t.get (main.3cea331738aacf3015b8.js:1)
    at so (main.3cea331738aacf3015b8.js:1)
le @ main.3cea331738aacf3015b8.js:1
main.3cea331738aacf3015b8.js:1 Error: StaticInjectorError(Os)[t -> t]: 
  StaticInjectorError(Platform: core)[t -> t]: 
    NullInjectorError: No provider for t!
    at t.get (main.3cea331738aacf3015b8.js:1)
    at main.3cea331738aacf3015b8.js:1
    at t (main.3cea331738aacf3015b8.js:1)
    at t.get (main.3cea331738aacf3015b8.js:1)
    at main.3cea331738aacf3015b8.js:1
    at t (main.3cea331738aacf3015b8.js:1)
    at t.get (main.3cea331738aacf3015b8.js:1)
    at bi (main.3cea331738aacf3015b8.js:1)
    at t.get (main.3cea331738aacf3015b8.js:1)
    at so (main.3cea331738aacf3015b8.js:1)
main.3cea331738aacf3015b8.js:1 ERROR TypeError: Cannot read property 'instance' of undefined
    at Li (main.3cea331738aacf3015b8.js:1)
    at Object.handleEvent (main.3cea331738aacf3015b8.js:1)
    at Object.handleEvent (main.3cea331738aacf3015b8.js:1)
    at Object.handleEvent (main.3cea331738aacf3015b8.js:1)
    at Br (main.3cea331738aacf3015b8.js:1)
    at main.3cea331738aacf3015b8.js:1
    at main.3cea331738aacf3015b8.js:1
    at e.invokeTask (polyfills.7a0e6866a34e280f48e7.js:1)
    at Object.onInvokeTask (main.3cea331738aacf3015b8.js:1)
    at e.invokeTask (polyfills.7a0e6866a34e280f48e7.js:1)
le @ main.3cea331738aacf3015b8.js:1

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 6.0.7
Node: 10.3.0
OS: win32 x64
Angular: 6.0.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.7.0-beta.1
@angular/cdk                      6.3.0
@angular/flex-layout              6.0.0-beta.16
@angular/material                 6.3.0
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.7 (cli-only)
@schematics/update                0.6.7 (cli-only)
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

Is there anything else we should know?

if i try:

ng serve --prod --optimization=false

Give me this error:

ERROR Error: StaticInjectorError(AppModule)[AppComponent -> MatSnackBar]: 
  StaticInjectorError(Platform: core)[AppComponent -> MatSnackBar]: 
    NullInjectorError: No provider for MatSnackBar!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (main.1671513801bff42a5980.js:31078)
    at resolveToken (main.1671513801bff42a5980.js:31328)
    at tryResolveToken (main.1671513801bff42a5980.js:31273)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (main.1671513801bff42a5980.js:31168)
    at resolveToken (main.1671513801bff42a5980.js:31328)
    at tryResolveToken (main.1671513801bff42a5980.js:31273)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (main.1671513801bff42a5980.js:31168)
    at resolveNgModuleDep (main.1671513801bff42a5980.js:38109)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (main.1671513801bff42a5980.js:38801)
    at resolveDep (main.1671513801bff42a5980.js:39167)
defaultErrorLogger @ main.1671513801bff42a5980.js:31671
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ main.1671513801bff42a5980.js:31719
(anonymous) @ main.1671513801bff42a5980.js:34368
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ polyfills.f506ff5bbe08fb3ba254.js:2710
push../node_modules/zone.js/dist/zone.js.Zone.run @ polyfills.f506ff5bbe08fb3ba254.js:2460
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ main.1671513801bff42a5980.js:33739
(anonymous) @ main.1671513801bff42a5980.js:34368
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ polyfills.f506ff5bbe08fb3ba254.js:2710
onInvoke @ main.1671513801bff42a5980.js:33780
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ polyfills.f506ff5bbe08fb3ba254.js:2709
push../node_modules/zone.js/dist/zone.js.Zone.run @ polyfills.f506ff5bbe08fb3ba254.js:2460
(anonymous) @ polyfills.f506ff5bbe08fb3ba254.js:3194
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ polyfills.f506ff5bbe08fb3ba254.js:2743
onInvokeTask @ main.1671513801bff42a5980.js:33771
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ polyfills.f506ff5bbe08fb3ba254.js:2742
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ polyfills.f506ff5bbe08fb3ba254.js:2510
drainMicroTaskQueue @ polyfills.f506ff5bbe08fb3ba254.js:2917
Promise.then (async)
scheduleMicroTask @ polyfills.f506ff5bbe08fb3ba254.js:2900
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ polyfills.f506ff5bbe08fb3ba254.js:2732
onScheduleTask @ polyfills.f506ff5bbe08fb3ba254.js:2619
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ polyfills.f506ff5bbe08fb3ba254.js:2723
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ polyfills.f506ff5bbe08fb3ba254.js:2554
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ polyfills.f506ff5bbe08fb3ba254.js:2574
scheduleResolveOrReject @ polyfills.f506ff5bbe08fb3ba254.js:3184
ZoneAwarePromise.then @ polyfills.f506ff5bbe08fb3ba254.js:3284
push../node_modules/@angular/core/fesm5/core.js.ApplicationInitStatus.runInitializers @ main.1671513801bff42a5980.js:33034
(anonymous) @ main.1671513801bff42a5980.js:34273
_callAndReportToErrorHandler @ main.1671513801bff42a5980.js:34365
(anonymous) @ main.1671513801bff42a5980.js:34271
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ polyfills.f506ff5bbe08fb3ba254.js:2710
onInvoke @ main.1671513801bff42a5980.js:33780
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ polyfills.f506ff5bbe08fb3ba254.js:2709
push../node_modules/zone.js/dist/zone.js.Zone.run @ polyfills.f506ff5bbe08fb3ba254.js:2460
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ main.1671513801bff42a5980.js:33694
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModuleFactory @ main.1671513801bff42a5980.js:34262
./src/main.ts @ main.1671513801bff42a5980.js:207374
__webpack_require__ @ runtime.8c26f1fab6959b00a997.js:77
0 @ main.1671513801bff42a5980.js:207388
__webpack_require__ @ runtime.8c26f1fab6959b00a997.js:77
checkDeferredModules @ runtime.8c26f1fab6959b00a997.js:44
webpackJsonpCallback @ runtime.8c26f1fab6959b00a997.js:31
(anonymous) @ main.1671513801bff42a5980.js:1
main.1671513801bff42a5980.js:207375 Error: StaticInjectorError(AppModule)[AppComponent -> MatSnackBar]: 
  StaticInjectorError(Platform: core)[AppComponent -> MatSnackBar]: 
    NullInjectorError: No provider for MatSnackBar!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (main.1671513801bff42a5980.js:31078)
    at resolveToken (main.1671513801bff42a5980.js:31328)
    at tryResolveToken (main.1671513801bff42a5980.js:31273)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (main.1671513801bff42a5980.js:31168)
    at resolveToken (main.1671513801bff42a5980.js:31328)
    at tryResolveToken (main.1671513801bff42a5980.js:31273)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (main.1671513801bff42a5980.js:31168)
    at resolveNgModuleDep (main.1671513801bff42a5980.js:38109)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (main.1671513801bff42a5980.js:38801)
    at resolveDep (main.1671513801bff42a5980.js:39167)

The same code work well with old version.

[steveandrews01]

I have exactly the same issue with MatBottomSheet - 'No provider for MatBottomSheet'. I've gone back to the previous version for now.

[fdeniz]

same here

[jelbourn]

I've set the latest tag on npm back to 6.2.1 while investigating this.

I ran into this as well while deploying material.angular.io and was able to fix it by doing a fresh install/build, so I assumed it was just an environment issue. However, with so many people running into it, it seems something is amiss.

[jelbourn]

Is someone able to share a project with a reproduction? I can't seem to reproduce it with material.angular.io any more.

[kdubious]

I tried to recreate and couldn't. So I deleted the:
@angular, @angular-devkit, rxjs, rxjs-compat
folders from node_modules, then ran:
npm install
and it seems that the issue is resolved.

I've been using ng update, since v5? in case that's useful. I'm now on the following:

"@angular/animations": "^6.0.5",
"@angular/cdk": "^6.3.0",
"@angular/common": "^6.0.5",
"@angular/compiler": "^6.0.5",
"@angular/compiler-cli": "^6.0.5",
"@angular/core": "^6.0.5",
"@angular/flex-layout": "^6.0.0-beta.15",
"@angular/forms": "^6.0.5",
"@angular/http": "^6.0.5",
"@angular/material": "^6.3.0",
"@angular/platform-browser": "^6.0.5",
"@angular/platform-browser-dynamic": "^6.0.5",
"@angular/platform-server": "6.0.5",
"@angular/router": "^6.0.5",

[fad250]

I just updated to version 6.3.0 and I dont have this issue. It worked perfectly!

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.7
@angular-devkit/build-angular     0.6.7
@angular-devkit/build-optimizer   0.6.7
@angular-devkit/core              0.6.7
@angular-devkit/schematics        0.6.7
@angular/cdk                      6.3.0
@angular/cli                      6.0.7
@angular/flex-layout              6.0.0-beta.15
@angular/material                 6.3.0
@angular/pwa                      0.7.0-beta.1
@ngtools/webpack                  6.0.7
@schematics/angular               0.6.7
@schematics/update                0.6.7
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

[jelbourn]

Can anyone answer whether the issue goes away if you update @angular/cli and @angular-devkit/build-angular to the latest versions?

[fdeniz]

Updating @angular/cli and @angular-devkit/build-angular solved my problem, thank you Jeremy!

[bampakoa]

I am using an ejected project with Angular CLI 1.7.4 and the problems seems to be present on 6.3.0 but not on 6.2.1. By the way, I am using Angular 6.0.7.

[jelbourn]

@josephperrott and I have spent a while debugging this now, and we're relatively sure this is caused by some bug in @angular/cli, specifically the build-optimizer. In and environment where we're able to reproduce the issue, running with --build-optimizer=false works fine. We'e not able to reproduce it at all with the most recently released versions of the cli and devkit.

So, to resolve this, you should:

• Update to the latest versions for @angular/cli and @angular-devkit (updating the other @angular packages probably wouldn't hurt)
• Clear your node_modules and do a fresh install

[jelbourn]

Since the issue seems to be coming from elsewhere, I'm going to move the latest tag back to 6.3

[simeyla]

Are we supposed to clear node_modules every time we do an ng update because frankly I'm getting sick of it trashing my project every time I use it for 0.1 more versions of angular.

Especially when it claims 'everything is fine!'

[kuncevic]

rimraf node_mdules yarn.lock did the trick

[bampakoa]

Deleting node_modules worked for Angular CLI 1.7.x also.

[Toso82]

Hi all i delete node_modules update @angular/cli to latest and now work well compile thanks @jelbourn

[chrishawn]

worked great with staging, as soon as i went to production, sentry caught TypeError: i.ɵnov(...)._getAriaLabel is not a function and i noticed most things worked but none of the SELECT controls weren't working.

I deleted node_modules and reinstalled redid prod build it worked.... so i went back to 6.2.0 did an install rebuild worked, only change was upgraded to 6.3.0 and it broke again... so between 6.2.0 and 6.3.0 node_modules has to be rewiped

[somuenc]

@jelbourn I tried all the solutions mentioned by you and others,
I tried below the solutions

1. Cleared node_modules and installed everything freshly. (used [email protected] & [email protected] [email protected])
2. Updated CLI and devkit still it doesn't work with [email protected] version
3. downgraded material to 6.2.1 then it worked where I was trying to implement adding Material to existing project.

I since I was able to reproduce with versions of [email protected] and [email protected]

CLI versions in my system(windows 10)

Let me know if really [email protected] is having some issues
(I was trying to implement this speech from ng-conf 2018 https://www.youtube.com/watch?v=v__RuD9RX3I&index=10&list=PL18cI3TmfldZh-LRbu5Uc-rDvoYlyGLqz)

Regards
Soma

[kdubious]

@somuenc, did you "ng update", then run any individual updates. Then delete node_modules folder. Then run "npm install"?

What's your build command, and what's your error message?

[somuenc]

Hi Kevin,
My application package.json
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/cdk": "^6.3.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/material": "^6.3.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.0",
"@angular-devkit/build-angular": "~0.6.0",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.0",
"@angular/language-service": "^6.0.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
and command with error

Regards
Soma

[somuenc]

@kdubious Its my bad my issue is related to https://github.com/angular/material2/issues/11836
Instead of posting this in 11836 I posted here.
Really I appreciate if someone look at this and see if its still reproducible.
Regards
Soma

[adamdport]

Updating @angular-devkit/build-angular from 0.6.3 to 0.6.8 fixed my prod mode issues.

[padigan]

Also had this problem with 6.3.2 when I published an app that was working fine in dev, rolled back to 6.2.1 and that fixed it for me.

[marcj]

Deleting ./node_modules/ and reinstalling it fixed it for me (again). So, try that first before you change package versions.

[otavioprado]

Same problem with material 6.4.0 in Angular 6.0.9

[digoburigo]

This error (Module build failed: Error: Debug Failure. Found typedef tag attached to node which it should not be!) is triggered when building with buildOptimizer=true and affects many node_modules like material, cdk, ol (OpenLayers)... I'm using Angular 6.0.9 with Material 6.4.0 (Angular CLI 6.0.8)

...
ERROR in ./node_modules/@angular/cdk/esm5/coercion.es5.js
Module build failed: Error: Debug Failure. Found typedef tag attached to node which it should not be!
ERROR in ./node_modules/@angular/material/esm5/tree.es5.js
Module build failed: Error: Debug Failure. Found typedef tag attached to node which it should not be!
ERROR in ./node_modules/@angular/material/esm5/tabs.es5.js
Module build failed: Error: Debug Failure. Found typedef tag attached to node which it should not be!
ERROR in ./node_modules/@angular/material/esm5/table.es5.js
Module build failed: Error: Debug Failure. Found typedef tag attached to node which it should not be!
...

[jelbourn]

I'm going to close this since general consensus is that updating the CLI/devkit and fresh installing node_nodes fixes the issue. I'm honestly not sure what the root cause was, except that it has something to do with Angular CLI's build-optimizer.

Feel free to open a new issue if someone is able to provide a full reproduction, though it may be better to open it on the angular-cli repo.

[mhmo91]

CLI/devkit was the issue for me, i'm surprised how come it's not a part of ng update

[angular-automatic-lock-bot[bot]]

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._}