Error while upgrading to Angular 10.

[DeepsiA]

Description

The latest release of Angular 10, requires us to update typescript version to 3.9 and above. However, while upgrading angular/core, I am landing into a dependency mismatch error, where @angular-devkit/build-angular requires typescript to be below 3.9.
Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.6 < 3.9", would install "3.9.7")

🔬 Minimal Reproduction

Simple steps to reproduce this bug.

npm i -g @angular/cli
ng update @angular/cli
ng update @angular/core

[alan-agius4]

Hi @DeepsiA,
Kindly try to run ng update @angular/cli @angular/core

[DeepsiA]

Hi @alan-agius4 ,
ng update @angular/cli @angular/core ran without errors, but there were no migrations or changes in the project except in package.json.

Also, the next step now failed with the same error.
I tried ng update @angular/material, as well as
ng update @angular/material @angular/flex-layout.
Both resulted in the below error.

The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 44 dependencies.
Fetching dependency metadata from registry...
Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.6 < 3.9", would install "3.9.7").
× Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.

[alan-agius4]

You seem to be in an invalid state. I suggest to clear the local changes performed by the migrations that where run previously. Afterward run npm install and run ng update @angular/cli @angular/core again.

[DeepsiA]

Hi @alan-agius4 ,

Thank you.

Running ng update @angular/cli @angular/core @angular/material @angular/flex-layout @angular/cdk at one go, finally migrated everything smoothly.

Although, I am now stuck with a warning in angular.json,

 "projects": {
    "ProjectName": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },

Warning - Property ProjectName is not allowed.

[alan-agius4]

Can you share the entire angular.json please?

[DeepsiA]

Here, below is my angular.json code -

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ProjectName": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ProjectName",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ProjectName:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ProjectName:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ProjectName:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ProjectName:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ProjectName:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "ProjectName"
}

[DeepsiA]

Along with that, I am also getting the following warnings on ng serve

WARNING in E:\Projects\VS_Code_Angular2\StayFit\src\app\user\user.service.ts depends on 'firebase'. CommonJS or AMD dependencies can cause optimization
bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in E:\Projects\VS_Code_Angular2\StayFit\node_modules\@angular\fire\__ivy_ngcc__\fesm2015\angular-fire-firestore.js depends on '@firebase/firestore'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in E:\Projects\VS_Code_Angular2\StayFit\node_modules\firebase\dist\index.cjs.js depends on '@firebase/app'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in E:\Projects\VS_Code_Angular2\StayFit\node_modules\firebase\dist\index.cjs.js depends on '@firebase/remote-config'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in E:\Projects\VS_Code_Angular2\StayFit\node_modules\firebase\dist\index.cjs.js depends on '@firebase/performance'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in E:\Projects\VS_Code_Angular2\StayFit\node_modules\firebase\dist\index.cjs.js depends on '@firebase/functions'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in E:\Projects\VS_Code_Angular2\StayFit\node_modules\firebase\dist\index.cjs.js depends on '@firebase/database'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in E:\Projects\VS_Code_Angular2\StayFit\node_modules\@firebase\firestore\dist\index.cjs.js depends on '@firebase/component'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in E:\Projects\VS_Code_Angular2\StayFit\node_modules\@firebase\firestore\dist\index.cjs.js depends on '@firebase/util'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in E:\Projects\VS_Code_Angular2\StayFit\node_modules\@angular\fire\__ivy_ngcc__\fesm2015\angular-fire.js depends on 'firebase/app'. CommonJS or
AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

I tried adding

"allowedCommonJsDependencies":[
              "@firebase",
              "@angular/fire"
            ],

in angular.json, but it didn't seem to help.

[alan-agius4]

ProjectName should be kebab case. That being said, likely you want to change that with a meaningful project name.

Re the warnings, you’d need to add all the problematic packages ex: @firebase/functions, @firebase/component etc...

Closing as this issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular-cli.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[angular-automatic-lock-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.}