首页 文章

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

提问于
浏览
36

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

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

我还将Angular CLI更新为1.5.0 .

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

ng new 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"
}

我究竟做错了什么 .

CLI配置:

CLI Config

7 回答

  • 7

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

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

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

    output

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

    pakage update

    如果包仍然指向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);

    Source link

  • 5

    Node版本更新修复了问题 .

    我不得不更新Node版本,

    sudo apt-get install nodejs
    
    npm uninstall -g @angular/cli
    
    npm cache clean
    
    npm install -g @angular/cli@latest
    
    ng new ProjectName
    

    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"
    }
    
  • 0

    如果您只想将angular4项目升级为角度5,请执行以下操作 .

    • 转到项目目录 .

    • 打开命令提示符并运行以下命令

    • npm install -g npm-check-updates

    • ncu -u

    这对我有用 .

    http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017/

  • 0

    检查Angular博客

    https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

    在文章中,提到了更新指南 .

    你可以在这里找到它:https://angular-update-guide.firebaseapp.com/

    此外,您可以将 angular-CLI 更新为 1.5.0 ,这将创建角度v5项目 . 您可以与您的差异进行比较 .

  • 16

    这是正确答案,而且非常简单 .

    Follow the official Angular upgrade guide.

    您将填写一份简短表格,选择您所使用的Angular版本以及要升级到的版本 . 然后,它会显示执行升级所需的步骤列表 . 您应该按照本指南进行所有升级 . (请先导航离开之前):) :)

    https://update.angular.io/

    enter image description here

  • 6

    将Angular 4升级为Angular 5

    打开webpack.config.js

    ContextReplacementPlugin 中添加以下代码

    /angular(\\|\/)core(\\|\/)(@angular|esm5)/
    
  • 47

    Elaborating 多一点,这帮助了我 BOTH the global as the PROJECT LOCAL upgrade .

    确切的指导线(当然)在https://update.angular.io/ .

    Global

    $ npm uninstall -g angular-cli (to be sure)
    $ npm uninstall -g @angular/cli
    $ npm cache clean
    $ npm install -g @angular-cli@1
    $ ng -v ... this will show you the current CLI version.
    

    Project local

    $ cd to/your/project/folder
    $ remove the folder node_modules
    $ npm install --save-dev @angular/cli@1
    $ npm install
    

    Then

    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审计修复

    $ npm install typescript@2.4.2 --save-exact

    Source:

    https://update.angular.io/将向您显示最佳路线 .

    主要区别在于你仍然使用'http'模块 . 您可以(或需要)从http迁移到httpclient模块 . 在大多数情况下,这很容易 .

相关问题