更新到 Angular 5答案

【问题标题】：Update to Angular 5更新到 Angular 5
【发布时间】：2018-03-11 21:14:57
【问题描述】：

如何更新到 Angular 5？这是来自我的 package.json：

"dependencies": {
    "@angular/animations": "5.0.0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/router": "5.0.0",
    "@types/jwt-decode": "^2.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "jwt-decode": "^2.2.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "1.4.0-rc.2",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.31",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "sw-precache": "^5.2.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
}

当我运行 npm install 时出现此错误

npm 错误！ Windows_NT 6.1.7601 npm 错误！ argv "C:\程序文件\nodejs\node.exe" "C:\Program 文件\nodejs\node_modules\npm\bin\npm-cli.js" "安装" npm 错误！节点 v6.11.2 npm 错误！ npm v3.10.10 npm 错误！代码ETARGET

npm 错误！ notarget 未找到兼容版本：@angular/common@5.0.0 npm 错误！ notarget 有效的安装目标：npm ERR！无目标 5.0.0-rc.0， 5.0.0-beta.7、5.0.0-beta.6、5.0.0-beta.5、5.0.0-beta.4、5.0.0-beta.3、5.0.0-beta.2、5.0。 0-beta.1、5.0.0-beta.0、4.4.4、4.4.3、4.4.2、 4.4.1、4.4.0-RC.0、4.3.6、4.3.5、4.3.4、4.3.3、4.3.2、4.3.1、4.3.0、4.3.0-rc.0、4.3。 0-beta.1、4.3.0-beta.0、4.2.6、4.2.5、4.2.4、4.2.3、4.2.2、4.2.1、4.2.0、4.2。 0-rc.2、4.2.0-rc.1、4.2.0-rc.0、4.2.0-beta.1、4.2.0-beta.0、4.1.3、4.1.2、4.1.1、 4.1.0、4.1.0-rc.0、4.1.0-beta.1、4.1.0-beta.0、4.0.3、4.0.2、4.0.1、4.0.0、4.0.0-rc。 6、4.0.0-rc.5、4.0.0-rc.4、4.0.0-rc.3、4.0.0-rc.2、4.0.0-rc.1、4.0.0-rc.0、 4.0.0-beta.8、4.0.0-beta.7、4.0.0-beta.6、4.0.0-beta.5、4.0.0-beta.4、4.0.0-beta.3、 4.0.0-beta.2、4.0.0-beta.1、4.0.0-beta.0、2.4.10、2.4.9、2.4.8、2.4.7、2.4.6、2.4.5、2.4。 4、2.4.3、2.4.2、2.4.1、2.4.0、2.3.1、2.3.0、2.3.0-rc.0、2.3.0-beta.1、2。 3.0-beta.0、2.2.4、2.2.3、2.2.2、2.2.1、2.2.0、2.2.0-rc.0、2.2.0-beta.1、2.2.0-beta.0、 2.1.2、2.1.1、2.1.0、2.1.0-rc.0、2.1.0-beta.0、2.0.2、2.0.1、2.0.0、2.0.0-rc.7、2.0 .0-rc.6、2.0.0-rc.5、2.0.0-rc.4、2.0.0-rc.3、2.0.0-rc.2、2.0.0-rc.1、2.0.0 -rc.0, 0.0.0-7, 0.0.0-6, 0.0.0-5, 0.0.0-4, 0.0.0-3, 0.0.0-2, 0.0.0-1, 0.0.0 -0 npm 错误！ notarget npm 错误！ notarget 这很可能不是 npm 本身的问题。 npm 错误！ notarget 在大多数情况下您或您的依赖项之一正在请求 npm ERR！无目标不存在的软件包版本。 npm 错误！ notarget npm 错误！ notarget 它被指定为 'gizza' npm ERR 的依赖项！无目标

我知道 Angular 5 仍处于测试阶段，但我想对其进行测试。

编辑：自 2017 年 11 月 1 日起，版本 5.0.0 现在确实存在

【问题讨论】：

不要指定次要版本，除非这对您非常重要。

标签： javascript node.js angular npm angular5

【解决方案1】：

截至目前，Angular 5 已于 2017 年 11 月 1 日正式发布，所以对于那些想要将旧的 Angular 应用程序更新到 Angular 5 的人：

1) Angular 团队还提供了handy tool 以尽可能简单地从任何版本升级到 Angular 5。

2) 您必须将所有 Angular 包升级到 5.0 版，运行以下命令：

npm install @angular/animations@^5.0.0 @angular/common@^5.0.0 @angular/compiler@^5.0.0 @angular/compiler-cli@^5.0.0 @angular/core@^5.0.0 @angular/forms@^5.0.0 @angular/http@^5.0.0 @angular/platform-browser@^5.0.0 @angular/platform-browser-dynamic@^5.0.0 @angular/platform-server@^5.0.0 @angular/router@^5.0.0 zone.js@^0.8.4 @angular/upgrade@^5.0.0 typescript@2.4.2 rxjs@^5.5.2

3) Angular 5 现在还依赖于 TypeScript 2.4.2 和 RxJS 5.5.2，因此您还必须升级这些包。

npm install typescript@2.4.2 --save-exact

4) 如果您依赖日期、货币、小数或百分比管道，在 5 中您会看到格式的细微变化。对于使用除 en-us 以外的语言环境的应用程序，您需要从 @angular/common/i18n_data/locale_fr 和 registerLocaleData(local) 导入它以及可选的 locale_extended_fr。有关管道破坏更改的更多信息： https://stackoverflow.com/a/47263949/2810015

5) 使用实现而不是扩展任何生命周期事件：确保您不使用扩展 OnInit，或将扩展与任何生命周期事件一起使用。而是使用工具。

6) 从 HttpModule 和 Http 服务切换到 HttpClientModule 和 HttpClient 服务。 HttpClient 简化了默认的人机工程学（您不再需要映射到 json 并删除任何不再需要的 map(res => res.json()) 调用。）现在支持类型化的返回值和拦截器。

7) 在 RxJS 5.5 中导入操作符的推荐方式是从 rxjs/operators 中。

import { map, filter, mergeMap, tap } from 'rxjs/operators';

【讨论】：

谢谢，这真的很有帮助 +1
对我来说失败了。我得到 npm 错误！ notarget 找不到与 @angular/compiler@'5.0.0' 匹配的版本
npmjs.com/package/@angular/compiler，您可以查看，@angular/compilerversion 5.0.2 已经发布。试试这个版本来安装，如果这对你来说也失败了。试试这个npm install https://github.com/angular/angular/tree/master/packages/compiler
对于那些出现“找不到匹配的版本”错误，您需要删除版本部分上的''
我一直在战斗（此版本的 CLI 仅与 Angular 5.0.0 或更高版本兼容。）几天，直到我在上面执行了您相当长的命令，我终于可以再次ng serve。无法告诉你你为我结束了多少悲伤。

【解决方案2】：

编辑：5.0.0 版现在确实存在于 2017 年 11 月 1 日

NPM 告诉你 5.0.0 不存在。将您的 package.json 更改为建议的候选版本之一，例如 5.0.0-rc.0。很有可能它们并不完全一样，因此请阅读 npm 错误，它在这种情况下实际上很有帮助。

"dependencies": {
    "@angular/animations": "5.0.0-rc.0",
    "@angular/common": "5.0.0-rc.0",
    "@angular/compiler": "5.0.0-rc.0",
    "@angular/core": "5.0.0-rc.0",
    "@angular/forms": "5.0.0-rc.0",
    "@angular/http": "5.0.0-rc.0",
    "@angular/platform-browser": "5.0.0-rc.0",
    "@angular/platform-browser-dynamic": "5.0.0-rc.0",
    "@angular/router": "5.0.0-rc.0",
    "@types/jwt-decode": "^2.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "jwt-decode": "^2.2.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "1.4.0-rc.2",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.31",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "sw-precache": "^5.2.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
}

【讨论】：

@Melchia 如果这个答案足够，请接受这个问题的未来用户。
是的，我只是在等待 3 分钟过去，以便接受您的回答

【解决方案3】：

编辑：这是最新的 Angular 5 工作依赖项：

  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.7",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }

只需复制粘贴并运行 npm install

【讨论】：

【解决方案4】：

即使粘贴来自Angular upgrade guide 的命令，我也遇到了同样的错误。

最后，我只是将版本更改为最新版本。

npm install @angular/animations@latest @angular/common@latest @angular/compiler@latest @angular/compiler-cli@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 rxjs@latest --save

npm install typescript@2.4.2 --save-exact

我不确定为什么会发生这个错误，因为即使我输入了

 npm view @angular/core versions --json

我可以看到该版本确实存在。我唯一的理论是，这可能是因为我在 Windows 上，而 Windows 版本的 NPM 不喜欢这些版本号......

【讨论】：

【解决方案5】：

@Vishal Gulati 的原始答案：https://stackoverflow.com/a/47132265/6877180

快速概览：

将 Angular 及其所有软件包升级到最新版本。

npm install typescript@2.4 --save-dev
npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@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 @angular/animations@latest --save

如果需要，升级 CLI

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

【讨论】：

【解决方案6】：

这是在 5.2.0 版本中更新 Angular CLI 的命令

npm install @angular/compiler-cli@5.2.0

【讨论】：

【解决方案7】：

这个问题是因为npm版本为了在 Angular 5 中工作；

"node": ">=6.9.5 <7.0.0",
"npm": ">=3.10.7 <4.0.0",
"yarn": ">=1.0.2 <2.0.0"

【讨论】：

我的 npm 版本是 3.10.10
另外，你可以读取错误来改变 package.json 的版本，比如@angular/common@5.0.0 npm ERR！ notarget 有效的安装目标：npm ERR！无目标 5.0.0-rc.0、5.0.0-beta.7。这意味着您必须将版本 @angular/common@5.0.0 更改为 @angular/common@5.0.0-rc.0 或 @angular/common@5.0.0-beta.7 anf 出现错误。

【解决方案8】：

基本上，实现这一目标的重要步骤很少。

将 Angular CLI 升级到最新版本。
修改 Angular 4 应用程序依赖项并更新依赖项。

就是这样，这样您就可以轻松地将 Angular 4 应用升级到 Angular 5，Read more

【讨论】：

【解决方案9】：

在更新之前，将你的模板标签重命名为 ng-template。

将所有依赖项更新到最新的 Angular 和正确版本的 TypeScript。如果您使用的是 Windows，则可以使用：

npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0 '@angular/core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/ platform-browser-dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'

npm install typescript@2.4.2 --save-exact

【讨论】：