I have a angular project with version 11, I am upgrading my project to latest angular 15 or 16

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,
}
}

Continue reading...