Boris
Boris

Reputation: 641

Production build throwing error after migratin UI to NG-ZORRO-ANTD

Steps to reproduce Production build is succesfull but the application just does not work.

ERROR NullInjectorError: StaticInjectorError(c)[$ -> V]: StaticInjectorError(Platform: core)[$ -> V]: NullInjectorError: No provider for V! at j.get (http://localhost:4200/main.205a39b164af2df4f46e.js:1:257106) at http://localhost:4200/main.205a39b164af2df4f46e.js:1:259276 at t (http://localhost:4200/main.205a39b164af2df4f46e.js:1:259646) at W.get (http://localhost:4200/main.205a39b164af2df4f46e.js:1:259769) at http://localhost:4200/main.205a39b164af2df4f46e.js:1:259276 at t (http://localhost:4200/main.205a39b164af2df4f46e.js:1:259646) at W.get (http://localhost:4200/main.205a39b164af2df4f46e.js:1:259769) at ar (http://localhost:4200/main.205a39b164af2df4f46e.js:1:306022) at zr.get (http://localhost:4200/main.205a39b164af2df4f46e.js:1:314741) at ar (http://localhost:4200/main.205a39b164af2df4f46e.js:1:306022)

The same error is thrown when running locally ng serve--prod or when we build the application ng serve --prod and then run it on a server. While running in development mode, everything is great and works fine.

Error is thrown inside core.js.pre-build-optimizer.js:7187 file.

DEPENDENCIES

"dependencies": {
"@angular/animations": "^8.0.0",
"@angular/cdk": "^7.3.1",
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/forms": "~8.0.0",
"@angular/material": "^7.3.1",
"@angular/material-moment-adapter": "^7.3.1",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/router": "~8.0.0",
"@netbasal/ngx-content-loader": "^2.1.0",
"@ngrx/store": "^7.4.0",
"@types/file-saver": "^2.0.1",
"@types/googlemaps": "^3.30.16",
"acorn": "^6.1.1",
"core-js": "^2.5.4",
"dayjs": "^1.8.15",
"file-saver": "^2.0.2",
"hammerjs": "^2.0.8",
"luxon": "^1.12.0",
"moment": "^2.24.0",
"ng-zorro-antd": "^8.2.1",
"ngx-cookie-service": "^2.1.0",
"ngx-material-timepicker": "^3.0.2",
"ramda": "^0.26.1",
"rxjs": "~6.5.2",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.0",
"@angular/cli": "~8.0.0",
"@angular/compiler-cli": "~8.0.0",
"@angular/language-service": "~8.0.0",
"@babel/core": "^7.4.5",
"@compodoc/compodoc": "^1.1.9",
"@storybook/addon-actions": "^5.0.11",
"@storybook/addon-links": "^5.0.11",
"@storybook/addon-notes": "^5.0.11",
"@storybook/addons": "^5.0.11",
"@storybook/angular": "^5.0.11",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"babel-loader": "^8.0.6",
"browser-sync": "^2.26.5",
"codelyzer": "^5.0.1",
"husky": "^3.0.5",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"prettier": "1.18.2",
"pretty-quick": "^1.11.1",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.4.5"
}

Upvotes: 0

Views: 448

Answers (2)

Boris
Boris

Reputation: 641

Ok. Issue is fixed. You're using conflicting versions of Angular and Angular Material. (Your Angular dependencies are on version 6, while the Angular CDK & Angular Material dependencies are on version 7, which require Angular v7.)

You should either:

Update all versions of Angular.

This can be done by running ng update @angular/core which should update all Angular dependencies.

(For more info about the update command, check out the docs, or the Update Angular website)

Downgrade your version of the Angular CDK and Angular Material.

This can be achieved by running the following command:

npm i @angular/{cdk,material}@'^6.0.0' This command should install version 6 of the CDK and Angular Material.

Check this URL https://stackoverflow.com/a/54059399/7541617 for more info

Upvotes: 1

Manuel Panizzo
Manuel Panizzo

Reputation: 896

Run ng serve --aot this is the compiler mode for production. if you make that you will get a debuggable error and will see what is missing in yours imports or providers. When you use "--prod flag" the code is uglified and modules, vars, class, etc... lose it name.

Upvotes: 1

Related Questions