@babel/types 在 Angular 8.2.14 中的 ng build 命令上构建错误

Question

I am getting the below errors when I run the command ' ng build ' for my Angular App.

ERROR in ../node_modules/@types/babel-types/index.d.ts:1769:96 - error TS1144: '{' or ';' expected.

1769 export function assertArrayExpression(node: object | null | undefined, opts?: object): asserts node is ArrayExpression;
                                                                                                    ~~~~
../node_modules/@types/babel-types/index.d.ts:1769:101 - error TS1005: ';' expected.

1769 export function assertArrayExpression(node: object | null | undefined, opts?: object): asserts node is ArrayExpression;
                                                                                                         ~~
../node_modules/@types/babel-types/index.d.ts:1769:104 - error TS1005: ';' expected.

1769 export function assertArrayExpression(node: object | null | undefined, opts?: object): asserts node is ArrayExpression;
                                                                                                            ~~~~~~~~~~~~~~~
../node_modules/@types/babel-types/index.d.ts:1770:101 - error TS1144: '{' or ';' expected.

1770 export function assertAssignmentExpression(node: object | null | undefined, opts?: object): asserts node is AssignmentExpression;
                                                                                                         ~~~~
../node_modules/@types/babel-types/index.d.ts:1770:106 - error TS1005: ';' expected.

1770 export function assertAssignmentExpression(node: object | null | undefined, opts?: object): asserts node is AssignmentExpression;

Here is my Angular and Node js version info:

Angular CLI: 8.3.29

Node: 16.13.1

OS: win32 x64

Angular: 8.2.14

npm 8.1.2

Previously, I was using Node 12 and it was building successfully. after upgrading to Node 16 I am facing issues as above.

"devDependencies": {
    "@angular-devkit/build-angular": "~0.803.25",
    "@angular/cli": "~8.3.25",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "12.7.3",
    "apply-loader": "^2.0.0",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "pug": "^2.0.3",
    "pug-loader": "^2.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.5.3"
  }

Do I need to upgrade any package versions? Or is there any compatibility issues with Node 16

Answer 1

The issue is that angular v8 has 100s of dependencies and fair few of these are not compatible with node v16 (or with package-lock.json v2). If you need to upgrade node, you might be better off also upgrading angular.

The best/easiest is to pace the upgrade of your dependencies whilst upgrading node in steps. Installing node 14, upgrade dependencies, then install v16 and do it again.

I also suggest you downgrade your npm to v7 as v8+ will upgrade your package-lock.json to v2. This can complicate things whilst doing the upgrades. After upgrading your dependencies you can always upgrade your npm to the latest and then upgrade your package-lock to v2.

I answer a similar question the other day it might also help you: https://stackoverflow.com/a/68159069/4604645