40

如何更新到 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:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" npm ERR! 节点 v6.11.2 npm 错误！npm v3.10.10 npm 错误！代码 ETARGET

npm 错误！notarget 未找到兼容版本：@angular/common@5.0.0 npm ERR！notarget 有效的安装目标：npm ERR！notarget 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！notarget 一个不存在的包版本。npm 错误！notarget npm 错误！notarget 它被指定为 'gizza' npm ERR 的依赖项！没有目标 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！notarget 一个不存在的包版本。npm 错误！notarget npm 错误！notarget 它被指定为 'gizza' npm ERR 的依赖项！没有目标 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！notarget 一个不存在的包版本。npm 错误！notarget npm 错误！notarget 它被指定为 'gizza' npm ERR 的依赖项！没有目标 0-2、0.0.0-1、0.0.0-0 npm 错误！notarget npm 错误！notarget 这很可能不是 npm 本身的问题。npm 错误！notarget 在大多数情况下，您或您的依赖项之一正在请求 npm ERR！notarget 一个不存在的包版本。npm 错误！notarget npm 错误！notarget 它被指定为 'gizza' npm ERR 的依赖项！没有目标 0-2、0.0.0-1、0.0.0-0 npm 错误！notarget npm 错误！notarget 这很可能不是 npm 本身的问题。npm 错误！notarget 在大多数情况下，您或您的依赖项之一正在请求 npm ERR！notarget 一个不存在的包版本。npm 错误！notarget npm 错误！notarget 它被指定为 'gizza' npm ERR 的依赖项！没有目标

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

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

4

9 回答 9

55

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

1) Angular 团队还提供了一个方便的工具，可以尽可能简单地从任何版本升级到 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';

我试图在这里解释更多。 https://onlyforcoder.blogspot.in/2017/11/angular-5-upgrade-your-project-To-Angular5.html

于 2017-11-08T13:34:53.897 回答
15

编辑：版本 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"
}
于 2017-09-29T22:39:25.143 回答
13

编辑：这是最新的 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

于 2017-11-04T00:08:05.640 回答
3

即使粘贴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 上，而 NPM 的 Windows 版本不喜欢那些版本号......

于 2017-11-30T03:52:38.247 回答
3

@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
于 2018-02-05T07:14:24.433 回答
2

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

npm install @angular/compiler-cli@5.2.0

于 2018-06-07T06:31:48.393 回答
1

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

"node": ">=6.9.5 <7.0.0",
"npm": ">=3.10.7 <4.0.0",
"yarn": ">=1.0.2 <2.0.0"
于 2017-09-29T22:43:08.923 回答
1

在更新之前，将您的模板标签重命名为 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-b​​rowser@'^5.0.0' @angular/platform-b​​rowser -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

于 2017-11-18T18:33:57.113 回答
1

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

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

就是这样，这样您就可以轻松地将 Angular 4 应用程序升级到 Angular 5，阅读更多

于 2017-11-08T11:10:17.963 回答