0

I have an angular project with version 11, I am upgrading my project to latest angular 15 or 16.I have upgraded sucessfully till 13, but when I am upgrading from 13 to 14 angular version I am getting below compilation issue. enter image description here

(13856:3) autoprefixer: end value has mixed support, consider using flex-end instead

Warning: 1 rules skipped due to selector errors: .custom-file-input:lang(en) ~ .custom-file-label -> unmatched pseudo-class :lang

./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 "@ngmodule/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/ **

any help is most appreciated.

I want to upgrade my angular 11 project to 14 or 15 or 16.

my package.json

{
  "name": "test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0 --port 4201",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-builders/custom-webpack": "^12.1.3",
    "@angular-devkit/core": "^14.2.11",
    "@angular/animations": "^14.3.0",
    "@angular/cdk": "^14.2.7",
    "@angular/common": "^14.3.0",
    "@angular/compiler": "^14.3.0",
    "@angular/core": "^14.3.0",
    "@angular/elements": "^14.3.0",
    "@angular/forms": "^14.3.0",
    "@angular/localize": "^14.3.0",
    "@angular/material": "^14.2.7",
    "@angular/platform-browser": "^14.3.0",
    "@angular/platform-browser-dynamic": "^14.3.0",
    "@angular/router": "^14.3.0",
    "@ng-bootstrap/ng-bootstrap": "^9.1.0",
    "@ngmodule/material-carousel": "^0.6.0",
    "@ngx-translate/core": "^12.1.2",
    "@types/socket.io-client": "^3.0.0",
    "angular-crumbs": "^3.0.1",
    "angular-svg-icon": "^11.2.0",
    "angular-user-idle": "^2.2.7",
    "bootstrap": "^4.5.0",
    "circular-json": "^0.5.9",
    "document-register-element": "^1.7.2",
    "element": "^0.1.4",
    "highcharts": "^9.3.3",
    "jquery": "^3.6.0",
    "jsplumb": "2.6.8",
    "jszip": "^3.10.0",
    "mat-file-upload": "^11.1.2",
    "material-carousel": "^0.0.2",
    "ng-click-outside": "^9.0.0",
    "ng-dynamic-breadcrumb": "^5.0.1",
    "ng2-carouselamos": "^4.1.0",
    "ng2-material-dropdown": "^0.11.0",
    "ngx-mat-select-search": "^3.3.0",
    "ngx-material-timepicker": "^5.5.3",
    "ngx-owl-carousel-o": "^5.1.1",
    "ngx-page-scroll": "^7.0.5",
    "ngx-pagination": "^5.1.1",
    "ngx-pinch-zoom": "^2.6.2",
    "panzoom": "^9.4.2",
    "rxjs": "~6.6.0",
    "rxjs-compat": "^6.6.7",
    "socket.io": "^4.5.0",
    "socket.io-client": "^4.5.0",
    "tslib": "^2.0.0",
    "typescript": "4.7",
    "xml2js": "^0.4.23",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.11",
    "@angular/cli": "^14.2.11",
    "@angular/compiler-cli": "^14.3.0",
    "@types/jasmine": "~3.6.0",
    "@types/jquery": "^3.5.5",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0"
  }
}

tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "strictPropertyInitialization": false,
    "enableIvy":false,
  }
}
jayachandra
  • 1
  • 1
  • please include any webpack config and package.json – Andrew Allen Jun 27 '23 at 13:44
  • What have you tried to resolve the problem? Where are you stuck? – Nico Haase Jun 28 '23 at 06:38
  • Node version? Your package.json suggests v12 but v14.3.x angular requires at least ^14.15.0 || ^16.10.0. See https://angular.io/guide/versions – Andrew Allen Jun 28 '23 at 07:06
  • I am using node v14.15.0 and I tried with v16.10.0 as well. when I give ng server its givng below errors Warning: 1 rules skipped due to selector errors: .custom-file-input:lang(en) ~ .custom-file-label -> unmatched pseudo-class :lang ./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. – jayachandra Jun 28 '23 at 10:01

0 Answers0