【发布时间】：2020-10-23 16:28:11
【问题描述】：
我有一个 Angular 6 项目，我想升级到 Angular 10，但我已经读过最好一次只升级一个主要版本，所以我现在正在尝试将它升级到 7.3。我已经按照 update.angular.io 上的所有步骤进行操作，但我开始认为这不是一个非常完整的指南。这个问题将分为几个子问题：
- 在升级 Angular Core 和 CLI（ng update @angular/cli@7 @angular/core@7）后，我尝试运行“ng serve”，但出现以下编译错误：
ERROR in node_modules/@angular/core/src/di/injector.d.ts(68,70): error TS1005: ',' expected. node_modules/@angular/core/src/render3/definition.d.ts(317,32): error TS1005: ')' expected. node_modules/@angular/core/src/render3/definition.d.ts(317,33): error TS1003: Identifier expected. node_modules/@angular/core/src/render3/definition.d.ts(317,83): error TS1005: ';' expected. node_modules/@angular/core/src/render3/definition.d.ts(317,84): error TS1131: Property or signature expected. node_modules/@angular/core/src/render3/definition.d.ts(317,98): error TS1005: '=>' expected. node_modules/@angular/core/src/render3/definition.d.ts(328,16): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(372,12): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(372,28): error TS1005: ']' expected. node_modules/@angular/core/src/render3/definition.d.ts(372,29): error TS1005: ',' expected. node_modules/@angular/core/src/render3/definition.d.ts(372,30): error TS1136: Property assignment expected. node_modules/@angular/core/src/render3/definition.d.ts(372,31): error TS1136: Property assignment expected. node_modules/@angular/core/src/render3/definition.d.ts(372,40): error TS1005: ':' expected. node_modules/@angular/core/src/render3/definition.d.ts(372,70): error TS1005: ',' expected. node_modules/@angular/core/src/render3/definition.d.ts(383,13): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(383,29): error TS1005: ']' expected. node_modules/@angular/core/src/render3/definition.d.ts(383,30): error TS1005: ',' expected. node_modules/@angular/core/src/render3/definition.d.ts(383,31): error TS1136: Property assignment expected. node_modules/@angular/core/src/render3/definition.d.ts(383,32): error TS1136: Property assignment expected. node_modules/@angular/core/src/render3/definition.d.ts(383,41): error TS1005: ':' expected. node_modules/@angular/core/src/render3/definition.d.ts(383,52): error TS1005: ',' expected. node_modules/@angular/core/src/render3/definition.d.ts(389,14): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(393,18): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(393,44): error TS1005: '(' expected. node_modules/@angular/core/src/render3/definition.d.ts(393,55): error TS1005: ')' expected. node_modules/@angular/core/src/render3/definition.d.ts(397,20): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(397,55): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(399,27): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(399,82): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(405,14): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(406,1): error TS1128: Declaration or statement expected. node_modules/@angular/core/src/render3/definition.d.ts(406,2): error TS1128: Declaration or statement expected. node_modules/@angular/core/src/render3/definition.d.ts(406,4): error TS1128: Declaration or statement expected.
在我看来，Angular Core 中的代码存在编译错误，这对我来说似乎很奇怪。我在互联网上四处寻找，但没有找到任何解决方案。我尝试删除 node_modules 文件夹中的所有内容并运行“npm install”。
奇怪的是，我当前的 Typescript 版本是 2.7.2，我认为 Angular 7 应该更晚。所以我尝试将 Typescript 升级到 3.2，然后运行“ng serve”，但它给了我这个错误：
Angular 编译器中的错误需要 TypeScript >=2.7.2 和
所以我将 Typescript 降级回 2.7.2。
当我运行“ng update @angular/cli@7 @angular/core@7”时，它给了我这些警告：
> npm WARN @agm/core@1.0.0-beta.3 requires a peer of
> @angular/core@^5.0.0 || ^6.0.0 but none is installed. You must install
> peer dependencies yourself. npm WARN @angular/animations@6.0.9
> requires a peer of @angular/core@6.0.9 but none is installed. You must
> install peer dependencies yourself. npm WARN @angular/common@6.0.9
> requires a peer of @angular/core@6.0.9 but none is installed. You must
> install peer dependencies yourself. npm WARN @angular/forms@6.0.9
> requires a peer of @angular/core@6.0.9 but none is installed. You must
> install peer dependencies yourself. npm WARN @angular/http@6.0.9
> requires a peer of @angular/core@6.0.9 but none is installed. You must
> install peer dependencies yourself. npm WARN
> @angular/platform-browser@6.0.9 requires a peer of @angular/core@6.0.9
> but none is installed. You must install peer dependencies yourself.
> npm WARN @angular/platform-browser-dynamic@6.0.9 requires a peer of
> @angular/core@6.0.9 but none is installed. You must install peer
> dependencies yourself. npm WARN @angular/router@6.0.9 requires a peer
> of @angular/core@6.0.9 but none is installed. You must install peer
> dependencies yourself. npm WARN @ng-bootstrap/ng-bootstrap@4.2.2
> requires a peer of @angular/common@^7.0.0 but none is installed. You
> must install peer dependencies yourself. npm WARN
> @ng-bootstrap/ng-bootstrap@4.2.2 requires a peer of
> @angular/forms@^7.0.0 but none is installed. You must install peer
> dependencies yourself. npm WARN @ng-bootstrap/ng-bootstrap@4.2.2
> requires a peer of rxjs@^6.3.0 but none is installed. You must install
> peer dependencies yourself. npm WARN @swimlane/ngx-datatable@11.3.2
> requires a peer of rxjs@^5.0.0 but none is installed. You must install
> peer dependencies yourself. npm WARN angular-calendar@0.23.7 requires
> a peer of @angular/core@>=5.0.0 <7.0.0 but none is installed. You must
> install peer dependencies yourself. npm WARN
> angular-draggable-droppable@2.0.0 requires a peer of
> @angular/core@>=5.0.0 <7.0.0 but none is installed. You must install
> peer dependencies yourself. npm WARN angular-resizable-element@2.0.0
> requires a peer of @angular/core@>=5.0.0 <7.0.0 but none is installed.
> You must install peer dependencies yourself. npm WARN bootstrap@4.1.1
> requires a peer of popper.js@^1.14.3 but none is installed. You must
> install peer dependencies yourself. npm WARN codelyzer@4.2.1 requires
> a peer of @angular/core@>=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0 but none
> is installed. You must install peer dependencies yourself. npm WARN
> ng-select@1.0.0 requires a peer of @angular/core@>=4.0.0 <7.0.0 but
> none is installed. You must install peer dependencies yourself. npm
> WARN ng2-nouislider@1.7.11 requires a peer of @angular/core@^2.0.0 ||
> ^4.0.0 || ^5.0.0 || ^6.0.0 but none is installed. You must install
> peer dependencies yourself. npm WARN ngx-chips@1.9.2 requires a peer
> of @angular/core@^6.0.0 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"})
我需要担心这些警告吗？我是否需要逐一检查并确定哪个版本与 Angular 7 兼容，然后一一升级？
这是我的 package.json。我觉得很奇怪，更新 Angular Core 和 CLI 的命令没有更新一堆其他 Angular 依赖项。
{ "name": "Whatever", "version": "0.0.0", "scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e" }, "private": true, "dependencies": {
"@agm/core": "^1.0.0-beta.2",
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^7.2.16",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"@ng-bootstrap/ng-bootstrap": "^4.2.2",
"@ng-select/ng-select": "^2.15.1",
"@swimlane/ngx-datatable": "^11.0.4",
"@types/jquery": "^3.3.22",
"ag-grid-angular": "^19.1.2",
"ag-grid-community": "^19.1.2",
"angular-calendar": "^0.23.7",
"angular-tree-component": "^7.1.0",
"angular2-chartjs": "^0.4.1",
"angular2-lightbox": "^1.3.0",
"bootstrap": "^4.1.1",
"c3": "^0.4.18",
"core-js": "^2.5.4",
"css-animator": "^2.1.1",
"d3": "^4.12.0",
"famfamfam-flags": "^1.0.0",
"feather-icons-sass": "^1.0.0",
"font-awesome-scss": "^1.0.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"ng-click-outside": "^3.0.0",
"ng-select": "^1.0.0-rc.3",
"ng2-archwizard": "^2.1.0",
"ng2-dragula": "^1.5.0",
"ng2-file-upload": "^1.2.1",
"ng2-google-charts": "^3.5.0",
"ng2-nouislider": "^1.7.7",
"ng2-trim-on-blur": "^1.0.7",
"ng2-ui-switch": "^1.0.2",
"ng2-validation": "^4.2.0",
"ngx-bar-rating": "^1.1.0",
"ngx-chips": "^1.5.10",
"ngx-color-picker": "^5.0.4",
"ngx-mask": "^8.1.2",
"ngx-perfect-scrollbar": "^7.2.0",
"node-sass": "^4.12.0",
"nouislider": "^11.1.0",
"rxjs": "^6.0.0",
"screenfull": "^3.3.2",
"sweetalert2": "^7.0.3",
"zone.js": "^0.8.26" }, "devDependencies": {
"@angular-devkit/build-angular": "~0.6.6",
"@angular/cli": "~7.3.10",
"@angular/compiler-cli": "^6.0.3",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "^2.7.2" } }
您对如何摆脱我的编译错误有任何想法吗？ （顺便说一句，我没有使用 Angular 材质。）
- 起初，当我尝试升级 Core 和 CLI（ng update @angular/cli@7 @angular/core@7）时，我不断收到如下错误：
包“ngx-carousel”具有不兼容的对等依赖项 “@angular/core”（需要 ">=5.0.0-rc.0 =2.4.0 =4.0.0
那么我会将依赖项更新为与 Angular 7 兼容的更高版本。为什么 update.angular.io 上的说明不讨论更新依赖项？是否有一些自动方法来更新所有依赖项以与 Angular 7 兼容？
由于我一直在阅读许多关于如何进行 Angular 升级的不同网页，因此有各种相互矛盾的建议。我正在阅读该命令的 ng 文档：
ng 更新 @angular/cli @angular/core
它说如果您还使用 --all=true 标志，它将更新 package.json 中的所有包。这对我来说似乎是个好主意。但如果这是个好主意，为什么 Angular 主页上的说明不包括这个呢？还是会将它们更新为比 Angular 7 更新？
我看到有人推荐运行这个：
ng 更新 --all --force
我认为这会将所有依赖项更新到最新版本。这是个好主意吗？
- 当我进行网络搜索以将 Angular 6 升级到 7 时，有很多页面包含各种说明。以下是两个示例：
https://medium.com/@jeroenouw/upgrade-to-angular-7-beta-within-10-minutes-c14fc380edd https://dzone.com/articles/upgrade-to-angular-7-in-5-simple-steps-1
这些还有各种其他命令可以运行，例如：
npm install @angular/animations@latest @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest --save
这是个好主意吗？我不认为我想要最新的，因为我只是想进入 Angular 7。
-
在我用 npm 安装了一些东西之后，它给了我这个花絮：
发现 1321 个漏洞（947 个低、20 个中等、352 个高、2 个严重） 运行
npm audit fix来修复它们，或者运行npm audit了解详情
运行“npm audit fix”是个好主意吗？有缺点吗？它会破坏我的代码吗？
感谢您提供的任何其他建议！
【问题讨论】：
-
确保保存升级前的工作。摆脱 package.lock 文件。然后按照 Angular 说明开始升级。忽略对等依赖，但确保全局和本地角度版本相同。经常运行 ng _version 并手动安装偏离轨道的 Angular 版本。整个体验很糟糕，但不要放弃。
-
我只需执行
ncu -u（您需要先全局安装 npmCheckUpdates。这会将您的所有依赖项更新到最新版本。然后只需执行npm install。您将可能需要迁移一些代码。 -
关于 TypeScript 版本的错误，有非常特定的 TS 版本只能与每个 Angular 版本一起使用。我有一个详细的答案 (stackoverflow.com/a/57216166/10959940) 可能已经解决了其中的一部分。一定要看看！
标签： angular typescript npm