Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular material 6.3.0 stop to work on build prod #11844

Closed
Toso82 opened this Issue Jun 19, 2018 · 27 comments

Comments

Projects
None yet
@Toso82
Copy link

Toso82 commented Jun 19, 2018

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

This comment has been minimized.

Copy link

steveandrews01 commented Jun 19, 2018

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

@fdeniz

This comment has been minimized.

Copy link

fdeniz commented Jun 19, 2018

same here

@jelbourn

This comment has been minimized.

Copy link
Member

jelbourn commented Jun 19, 2018

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 jelbourn self-assigned this Jun 19, 2018

@jelbourn jelbourn added the P1 label Jun 19, 2018

@jelbourn

This comment has been minimized.

Copy link
Member

jelbourn commented Jun 19, 2018

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

@kdubious

This comment has been minimized.

Copy link

kdubious commented Jun 19, 2018

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

This comment has been minimized.

Copy link

fad250 commented Jun 19, 2018

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

This comment has been minimized.

Copy link
Member

jelbourn commented Jun 19, 2018

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

@fdeniz

This comment has been minimized.

Copy link

fdeniz commented Jun 19, 2018

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

@bampakoa

This comment has been minimized.

Copy link

bampakoa commented Jun 19, 2018

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

This comment has been minimized.

Copy link
Member

jelbourn commented Jun 19, 2018

@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 jelbourn removed the P1 label Jun 19, 2018

@jelbourn

This comment has been minimized.

Copy link
Member

jelbourn commented Jun 19, 2018

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

@simeyla

This comment has been minimized.

Copy link

simeyla commented Jun 20, 2018

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

This comment has been minimized.

Copy link
Contributor

kuncevic commented Jun 20, 2018

rimraf node_mdules yarn.lock did the trick

@bampakoa

This comment has been minimized.

Copy link

bampakoa commented Jun 20, 2018

Deleting node_modules worked for Angular CLI 1.7.x also.

@Toso82

This comment has been minimized.

Copy link
Author

Toso82 commented Jun 20, 2018

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

@chrishawn

This comment has been minimized.

Copy link

chrishawn commented Jun 20, 2018

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

This comment has been minimized.

Copy link

somuenc commented Jun 24, 2018

@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 material@6.3.0 & cli@6.0.0 dev-kit@6.3.0)
  2. Updated CLI and devkit still it doesn't work with material@6.3.0 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 material@6.3.0 and devkit@6.3.0

CLI versions in my system(windows 10)

image

Let me know if really material@6.3.0 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

This comment has been minimized.

Copy link

kdubious commented Jun 24, 2018

@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

This comment has been minimized.

Copy link

somuenc commented Jun 24, 2018

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

image

Regards
Soma

@somuenc

This comment has been minimized.

Copy link

somuenc commented Jun 24, 2018

@kdubious Its my bad my issue is related to #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

This comment has been minimized.

Copy link

adamdport commented Jun 26, 2018

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

@padigan

This comment has been minimized.

Copy link

padigan commented Jul 10, 2018

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

This comment has been minimized.

Copy link

marcj commented Jul 16, 2018

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

@otavioprado

This comment has been minimized.

Copy link

otavioprado commented Jul 18, 2018

Same problem with material 6.4.0 in Angular 6.0.9

@digoburigo

This comment has been minimized.

Copy link

digoburigo commented Jul 23, 2018

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

This comment has been minimized.

Copy link
Member

jelbourn commented Jul 24, 2018

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.

@jelbourn jelbourn closed this Jul 24, 2018

@mhmo91

This comment has been minimized.

Copy link

mhmo91 commented Sep 4, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.