Build Error: After upgrading version 10 to 14

[kumaresan-subramani]

Command

build, serve

Is this a regression?

• [X] 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
  }
}

[alan-agius4]

The problem appears by @ngbmodule/material-carousel which is not compatible with Angular version 14.

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