如何从Angular 4更新/升级到Angular 5+

Question

如何从Angular 4更新/升级到Angular 5+

我需要将我的项目从Angular 4更新为Angular 5+,

我需要将以下所有依赖项更改为Angular 5+.

我还将Angular CLI更新为1.5.0.

我试图创建新项目但似乎只创建了Angular 4项目.

新的NG5_Project

"dependencies": {
  "@angular/animations": "^4.2.4",
  "@angular/common": "^4.2.4",
  "@angular/compiler": "^4.2.4",
  "@angular/core": "^4.2.4",
  "@angular/forms": "^4.2.4",
  "@angular/http": "^4.2.4",
  "@angular/platform-browser": "^4.2.4",
  "@angular/platform-browser-dynamic": "^4.2.4",
  "@angular/router": "^4.2.4",
  "core-js": "^2.4.1",
  "rxjs": "^5.4.2",
  "zone.js": "^0.8.14"
}

Run Code Online (Sandbox Code Playgroud)

我究竟做错了什么.

CLI配置:

Answer 1

San*_*isy 48

此解决方案适用于使用角度模板的Visual Studio 2017

使用Node.js命令提示符或Open PowerShell.导航到项目目录并使用命令dir检查package.json文件是否存在.

关闭Visual Studio实例并运行该命令, npm install -g npm-check-updates 然后应显示以下输出

然后使用命令ncu -u 以下包应更新到最新版本

如果包仍然指向Angular 4,则删除package-lock.json并再次按照上面给出的步骤操作.

Webpack被Visual Studio用作模块捆绑器.Webpack使用AotPlugin编译Angular 4应用程序,现在Webpack不再使用Aotplugin用于Angular 5.它现在使用AngularCompilerPlugin.So打开webpack.config.js并用AngularCompilerPlugin 替换所有出现的AotPlugin.

打开ClientApp/boot.server.ts文件并替换以下代码行(第22行).

const zone = moduleRef.injector.get(NgZone);

用,

const zone: NgZone = moduleRef.injector.get(NgZone);

来源链接

Answer 2

San*_*nde 15

Node版本更新修复了问题.

我不得不更新Node版本,

sudo apt-get install nodejs

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli@latest

ng new ProjectName

Run Code Online (Sandbox Code Playgroud)

node --version ==> 8.9.0

ng --version ==> 1.5.0

"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",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
}

Run Code Online (Sandbox Code Playgroud)