search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.76k stars 11.98k forks source link

Facing issues after upgrade from Angular/cli 5.2.9 to angular/cli 6.0.8 ? #11183

Closed maifs closed 6 years ago

maifs commented 6 years ago

Bug Report or Feature Request (mark with an x)


### Area
-devkit
- schematics

### Versions -- 6.0.8
<!--
Output from: `node --10.4.0` and `npm -6.1.0`.
  Windows (10). 
-->
### Repro steps
<!--
This is the source : [](https://github.com/emonney/QuickApp) , please get from it and install angular material 6 and CDK with it then try to upgrade it to angular 6.0.8.  
i am using these command:

please see the following link:

[https://update.angular.io/](url)

-->

### The log given by the failure
<!-- Normally this include a stack trace and some more information. -->
M:\StoreApplications\Git\SaleStoreApp\SaleStoreApp\SaleStoreAppUI\ClientApp>npm install
npm WARN @angular-devkit/build-webpack@0.7.0-beta.2 requires a peer of webpack@~4.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@6.1.0-beta.2 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/webpack@6.0.0-beta.7 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/compiler-cli@6.0.4 requires a peer of typescript@>=2.7.2 <2.8 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@6.0.8 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 karma-jasmine-html-reporter@1.1.0 requires a peer of jasmine@>=3 but none is installed. You must install peer dependencies yourself.
npm WARN ng2-toasty@4.0.3 requires a peer of @angular/core@^2.4.7 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-bootstrap@3.0.0 requires a peer of @angular/forms@6.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN tsickle@0.29.0 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
<!--
My application was working fine when angular 5.2.1 but now many packages are giving errors. It was basically developed in bootstrap 3.3.7 . Now everything has been disturbed. My application design is disturbed. I have removed successfully the bugs in code after upgrade but now dependent packages are creating issues. I want to use angular material, bootstrap latest version and toasty and other packages and wants to be working.
-->

### 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": "info@salestoreapp.com",
    "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.
maifs commented 6 years ago

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

please see it @angular/compiler-cli@6.0.4 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.

filipesilva commented 6 years ago

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

npm WARN @angular-devkit/build-webpack@0.7.0-beta.2 requires a peer of webpack@~4.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@6.1.0-beta.2 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/webpack@6.0.0-beta.7 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/compiler-cli@6.0.4 requires a peer of typescript@>=2.7.2 <2.8 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@6.0.8 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 karma-jasmine-html-reporter@1.1.0 requires a peer of jasmine@>=3 but none is installed. You must install peer dependencies yourself.
npm WARN ng2-toasty@4.0.3 requires a peer of @angular/core@^2.4.7 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-bootstrap@3.0.0 requires a peer of @angular/forms@6.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN tsickle@0.29.0 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.

maifs commented 6 years ago

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

:\StoreApplications\Git\SaleStoreApp\SaleStoreApp\SaleStoreAppUI\ClientApp>npm install typescript@2.7.2 npm WARN @ngtools/webpack@6.0.0-beta.7 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 karma-jasmine-html-reporter@1.1.0 requires a peer of jasmine@>=3 but none is installed. You must install peer dependencies yourself. npm WARN ng2-toasty@4.0.3 requires a peer of @angular/core@^2.4.7 || ^4.0.0 but none is installed. You must install peer dependencies yourself. npm WARN ngx-bootstrap@3.0.0 requires a peer of @angular/forms@6.0.1 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

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

{ "name": "SaleStoreApp", "version": "2.5.3", "description": "Angular6 (with ASP.NET Core) ", "author": { "name": "SaleStoreApp", "email": "info@salestoreapp.com", "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" ] }

Bridgeway commented 6 years ago

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

angular-automatic-lock-bot[bot] commented 5 years ago

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.