Build Error: After upgrading version 10 to 14 #25774
Description
Command
build, serve
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
10.2.4
Description
I have project which has angular version of 10.2.4, it was working fine on thjat version. After that i wanted to upgrade angular version to 14.
so i updated all of my angular package version and increased node.js version too.
Node version - 14.20.0
When i try to run application after that facing below issue
Minimal Reproduction
-
download below simple app
web.zip -
npm i
-
npm run start or ng serve
you will get error
Exception or Error
./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
Error: Failed to initialize Angular compilation - The target entry-point "@ngbmodule/material-carousel" has missing dependencies:
- @angular/compiler/src/core
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
× Failed to compile.
Your Environment
{
"name": "id8-ui",
"version": "0.0.0",
"scripts": {
"ng": "ng update",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build-maven-local": "ng build",
"build-maven-prod": "node ./node_modules/@angular/cli/bin/ng build --prod"
},
"private": true,
"dependencies": {
"@angular/animations": "~14.0.3",
"@angular/cdk": "~14.0.3",
"@angular/common": "~14.0.3",
"@angular/compiler": "~14.0.3",
"@angular/core": "~14.0.3",
"@angular/forms": "~14.0.3",
"@angular/material": "~14.0.3",
"@angular/platform-browser": "~14.0.3",
"@angular/platform-browser-dynamic": "~14.0.3",
"@angular/router": "~14.0.3",
"@ngbmodule/material-carousel": "^0.7.1",
"angular-oauth2-oidc": "^10.0.3",
"chart.js": "^2.9.3",
"crypto-js": "^4.0.0",
"file-saver": "^2.0.5",
"hammerjs": "^2.0.8",
"ng2-charts": "^2.3.0",
"ngx-file-drag-drop": "^5.1.1",
"rxjs": "~6.6.3",
"tslib": "^2.0.0",
"xlsx": "^0.17.1",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.0.3",
"@angular/cli": "^14.2.12",
"@angular/compiler-cli": "~14.0.3",
"@angular/language-service": "~14.0.3",
"@types/crypto-js": "^4.0.1",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "^6.4.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "^4.7.4"
}
}
Anything else relevant?
my old package.json
{
"name": "id8-ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build-maven-local": "ng build",
"build-maven-prod": "node ./node_modules/@angular/cli/bin/ng build --prod"
},
"private": true,
"dependencies": {
"@angular/animations": "~10.2.4",
"@angular/cdk": "~10.2.4",
"@angular/common": "~10.2.4",
"@angular/compiler": "~10.2.4",
"@angular/core": "~10.2.4",
"@angular/forms": "~10.2.4",
"@angular/material": "~10.2.4",
"@angular/platform-browser": "~10.2.4",
"@angular/platform-browser-dynamic": "~10.2.4",
"@angular/router": "~10.2.4",
"@ngbmodule/material-carousel": "^0.7.1",
"angular-oauth2-oidc": "^10.0.3",
"chart.js": "^2.9.3",
"crypto-js": "^4.0.0",
"file-saver": "^2.0.5",
"hammerjs": "^2.0.8",
"ng2-charts": "^2.3.0",
"ngx-file-drag-drop": "^5.1.1",
"rxjs": "~6.6.3",
"tslib": "^2.0.0",
"xlsx": "^0.17.1",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1002.2",
"@angular/cli": "~10.2.2",
"@angular/compiler-cli": "~10.2.4",
"@angular/language-service": "~10.2.4",
"@types/crypto-js": "^4.0.1",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "~4.0.7"
}
}
tsconfig.json file
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"enableIvy": false,
"fullTemplateTypeCheck": false,
"strictInjectionParameters": false,
"disableTypeScriptVersionCheck": true
}
}