Angular-cli: Facing issues after upgrade from Angular/cli 5.2.9 to angular/cli 6.0.8 ?

Created on 9 Jun 2018 · 5Comments · Source: angular/angular-cli

Bug Report or Feature Request (mark with an `x`)

```X

Area

-devkit

schematics

Versions -- 6.0.8

Repro steps

The log given by the failure

M:\StoreApplications\Git\SaleStoreApp\SaleStoreApp\SaleStoreAppUI\ClientApp>npm install
npm WARN @angular-devkit/[email protected] requires a peer of webpack@~4.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/[email protected] requires a peer of typescript@~2.4.0 || ~2.5.0 || ~2.6.0 || ~2.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/[email protected] requires a peer of typescript@~2.5.0 | ~2.6.0 | ~2.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of typescript@>=2.7.2 <2.8 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/[email protected] requires a peer of typescript@~2.4.0 || ~2.5.0 || ~2.6.0 || ~2.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of jasmine@>=3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^2.4.7 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>=2.4.2 <2.9 but none is installed. You must install peer dependencies yourself.

audited 42964 packages in 14.125s
found 6 vulnerabilities (1 low, 5 moderate)
run npm audit fix to fix them, or npm audit for details

Desired functionality

Mention any other details that might be useful

Please see my package.json

{
"name": "SaleStoreApp",
"version": "2.5.3",
"description": "Angular6 (with ASP.NET Core) ",
"author": {
"name": "SaleStoreApp",
"email": "[email protected]",
"url": "https://www.salestoreapp.com/about"
},
"license": "MIT",
"homepage": "https://www.salestoreapp.com/",
"repository": "https://github.com/salestoreapp/a.git",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:ssr": "npm run build -- --app=ssr --output-hashing=media",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"dependencies": {
"@angular-devkit/build-webpack": "0.0.8",
"@angular/animations": "^6.0.4",
"@angular/cdk": "^6.2.1",
"@angular/common": "^6.0.4",
"@angular/compiler": "^6.0.4",
"@angular/core": "^6.0.4",
"@angular/forms": "^6.0.4",
"@angular/http": "^6.0.4",
"@angular/material": "^6.2.1",
"@angular/platform-browser": "^6.0.4",
"@angular/platform-browser-dynamic": "^6.0.4",
"@angular/router": "^6.0.4",
"@ngtools/webpack": "^6.0.8",
"@ngx-translate/core": "^10.0.2",
"@ngx-translate/http-loader": "^3.0.1",
"@swimlane/ngx-datatable": "^13.0.1",
"angular": "^1.7.1",
"angular-archwizard": "^3.0.0",
"bootstrap": "^4.1.1",
"bootstrap-datepicker": "1.8.0",
"bootstrap-select": "1.13.1",
"bootstrap-toggle": "^2.2.2",
"chart.js": "^2.7.2",
"core-js": "^2.5.7",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"ng2-charts": "^1.6.0",
"ng2-toasty": "^4.0.3",
"ngx-bootstrap": "^3.0.0",
"popper": "^1.0.1",
"popper.js": "^1.14.3",
"rxjs": "^6.2.0",
"rxjs-compat": "^6.2.0",
"typescript": "^2.9.1",
"web-animations-js": "^2.3.1",
"webpack": "^4.12.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.7.0-beta.2",
"@angular-devkit/core": "^0.7.0-beta.2",
"@angular/cli": "^6.0.8",
"@angular/compiler-cli": "^6.0.4",
"@angular/language-service": "^6.0.4",
"@types/jasmine": "^2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "^3.3.2",
"@types/node": "^10.3.2",
"codelyzer": "^4.3.0",
"jasmine-core": "^3.1.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.2",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.1",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.1.0",
"protractor": "~5.3.2",
"ts-node": "^6.1.0",
"tslint": "~5.10.0"
},
"keywords": [
"ng",
"angular",
"angular2",
"angular5",
"angular6",
"angularX",
"aspnetcore",
"aspnet-core",
"startup",
"template",
"quick-app",
"quickapp",
"quickapplication",
"rad",
"ng2",
"ng5",
"ngX"
]
}

---------------angular.json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"quickapp": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"progress": true,
"showCircularDependencies": false,
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
},
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/bootstrap-toggle/js/bootstrap-toggle.js",
"node_modules/bootstrap-select/dist/js/bootstrap-select.js",
"node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"
]
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "quickapp:build"
},
"configurations": {
"production": {
"browserTarget": "quickapp:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "quickapp:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/bootstrap-toggle/js/bootstrap-toggle.js",
"node_modules/bootstrap-select/dist/js/bootstrap-select.js",
"node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"
],
"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
},
"src/styles.css"
],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"/node_modules/"
]
}
}
}
},
"quickapp-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "quickapp:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"/node_modules/"
]
}
}
}
}
},
"defaultProject": "quickapp",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "css"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}

-----tsconfig------------------------

{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowJs": true,
"strictPropertyInitialization": false,
"target": "es6",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es6",
"dom"
]
}
}

If any other code file is required , please inform. thank you.

Your response 'll be appreciated.

Source

maifs

Most helpful comment

The node equivalent of 'dll hell' continues.... :(

Bridgeway on 8 Jul 2018

👍3

All 5 comments

and when i am trying to build my source then getting typescript errors:

please see it
@angular/[email protected] requires typescript@'>=2.7.0 <2.8.0' but 2.9.1 was found instead.
Using this version can result in undefined behaviour and difficult to debug problems.

Please run the following command to install a compatible version of TypeScript.

npm install typescript@'>=2.7.0 <2.8.0'

To disable this warning run "ng config cli.warnings.typescriptMismatch false".

ERROR in ./src/main.ts
Module build failed: Error: Angular Compiler was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed. You can check this with npm ls @ngtools/webpack, and then remove the extra copies.
at Object.ngcLoader (M:\StoreApplications\Git\SaleStoreApp\SaleStoreApp\SaleStoreAppUI\ClientApp\node_modules\@ngtools\webpack\src\loader.js:33:15)
ERROR in ./src/polyfills.ts
Module build failed: Error: Angular Compiler was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed. You can check this with npm ls @ngtools/webpack, and then remove the extra copies.
at Object.ngcLoader (M:\StoreApplications\Git\SaleStoreApp\SaleStoreApp\SaleStoreAppUI\ClientApp\node_modules\@ngtools\webpack\src\loader.js:33:15)
ERROR in The Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but 2.9.1 was found instead.

maifs on 9 Jun 2018

The warnings you are seeing are because you have invalid peer dependencies:

npm WARN @angular-devkit/[email protected] requires a peer of webpack@~4.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/[email protected] requires a peer of typescript@~2.4.0 || ~2.5.0 || ~2.6.0 || ~2.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/[email protected] requires a peer of typescript@~2.5.0 | ~2.6.0 | ~2.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of typescript@>=2.7.2 <2.8 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/[email protected] requires a peer of typescript@~2.4.0 || ~2.5.0 || ~2.6.0 || ~2.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of jasmine@>=3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^2.4.7 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>=2.4.2 <2.9 but none is installed. You must install peer dependencies yourself.

The most important one is that you have TypeScript 2.9.1 in your package.json but all those dependencies need TypeScript 2.7.2.

If you go through the peer dependency messages one by one and install the correct package version (the one they ask for) those warnings will go away.

filipesilva on 10 Jun 2018

Hi thank you Filip. Now see following errors after installing these package.

:\StoreApplications\Git\SaleStoreApp\SaleStoreApp\SaleStoreAppUI\ClientApp>npm install [email protected]
npm WARN @ngtools/[email protected] requires a peer of typescript@~2.5.0 | ~2.6.0 | ~2.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of jasmine@>=3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^2.4.7 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

[email protected]
updated 1 package and audited 40737 packages in 28.8s
found 6 vulnerabilities (1 low, 5 moderate)
run npm audit fix to fix them, or npm audit for details

--------------package.json

{
"name": "SaleStoreApp",
"version": "2.5.3",
"description": "Angular6 (with ASP.NET Core) ",
"author": {
"name": "SaleStoreApp",
"email": "[email protected]",
"url": "https://www.salestoreapp.com/about"
},
"license": "MIT",
"homepage": "https://www.salestoreapp.com/",
"repository": "https://github.com/salestoreapp/a.git",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:ssr": "npm run build -- --app=ssr --output-hashing=media",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"dependencies": {
"@angular-devkit/build-webpack": "0.0.8",
"@angular/animations": "^6.0.4",
"@angular/cdk": "^6.2.1",
"@angular/common": "^6.0.4",
"@angular/compiler": "^6.0.4",
"@angular/core": "^6.0.4",
"@angular/forms": "^6.0.4",
"@angular/http": "^6.0.4",
"@angular/material": "^6.2.1",
"@angular/platform-browser": "^6.0.4",
"@angular/platform-browser-dynamic": "^6.0.4",
"@angular/router": "^6.0.4",
"@ngtools/webpack": "^6.0.8",
"@ngx-translate/core": "^10.0.2",
"@ngx-translate/http-loader": "^3.0.1",
"@swimlane/ngx-datatable": "^13.0.1",
"@types/node": "^10.1.4",
"angular": "^1.7.1",
"angular-archwizard": "^3.0.0",
"bootstrap": "^4.1.1",
"bootstrap-datepicker": "1.8.0",
"bootstrap-select": "1.13.1",
"bootstrap-toggle": "^2.2.2",
"chart.js": "^2.7.2",
"core-js": "^2.5.7",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"ng2-charts": "^1.6.0",
"ng2-toasty": "^4.0.3",
"ngx-bootstrap": "^3.0.0",
"popper": "^1.0.1",
"popper.js": "^1.14.3",
"rxjs": "^6.2.0",
"rxjs-compat": "^6.2.0",
"typescript": "^2.7.2",
"web-animations-js": "^2.3.1",
"webpack": "^4.12.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.6.8",
"@angular-devkit/core": "^0.6.8",
"@angular/cli": "^6.0.8",
"@angular/compiler-cli": "^6.0.4",
"@angular/language-service": "^6.0.4",
"@types/jasmine": "^2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "^3.3.2",
"codelyzer": "^4.3.0",
"jasmine-core": "^3.1.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.2",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.1",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.1.0",
"protractor": "~5.3.2",
"ts-node": "^6.1.0",
"tslint": "~5.10.0"
},
"keywords": [
"ng",
"angular",
"angular2",
"angular5",
"angular6",
"angularX",
"aspnetcore",
"aspnet-core",
"startup",
"template",
"quick-app",
"quickapp",
"quickapplication",
"rad",
"ng2",
"ng5",
"ngX"
]
}