从angular5 升级到angular9（最新版本）

忘是亡心i 2023-07-06 14:30 70阅读 0赞

搞了一天，终于升级成功了，其实最后升级成功倒发现没那么难。  
这篇文章不定时更新，最近在升级框架。

以下方法适用于想一次性升级package.json中所有依赖到最新版本的方案：

首先建议大家先用`ng --version`命令查看一下自己项目当前所有依赖的版本情况，并且在开始升级之前将所有已完成工作commit，以便于可以回退到一个比较稳定的版本。

1.  这个库是我们的必需品[npm-check-updates][]  
    依次运行下面的三个命令

npm i -g npm-check-updates
    ncu -u
    npm install

`npm i -g npm-check-updates`可能需要管理员权限，mac系统直接加前缀sudo

1.  升级完之后可能会报这个错误  
    *The serve command requires to be run in an Angular project, but a project definition could not be found.*  
    ![在这里插入图片描述][20200219154358932.png]  
    这个原因是新的angular cli更新使angular-cli.json变得多余，并被angular.json代替。一般出现在比较老版本的angular cli中，我的就是1.6.6的版本，此时可以运行以下命令

ng update @angular/cli --migrate-only --from=<WhateverVersionYouAreCurrentlyOn>

比如我的之前版本为1.6.6，需要运行以下命令

ng update @angular/cli --migrate-only --from=1.6.6

运行这个命令有可能出现`Migration failed: Unexpected end of file.`或`Unexpected token / in JSON`错误，或者其他错误，请先根据自己当前版本检查自己在下面这张图片中的已有的文件是否完全正确，如果使用vscode，需要保证编辑器不报错。如果都是正确的，那么请检查文件编码是否为utf 8 whithout BOM 格式。  
![需检查的文件的文件名][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzI3MDg4MjUz_size_16_color_FFFFFF_t_70]  
在update分支升级完成后，切回主分支，想要`ng serve`当前主分支的项目，需要现将node nodules文件夹和package-lock.json删除，然后`npm cache clean --force`清除缓存, 最后再运行`npm install`。如果可以`ng serve`成功，但是控制台报错，尝试直接再运行一次`npm install`。

1.  编译成功后如果出现这种`cannot read property 'nativeElement' of undefined`的错误，一般由于`@ViewChild`中指向的元素为静态元素导致，需要加上`{static: true}`, 如图所示  
    ![在这里插入图片描述][20200309171151246.png]  
    ![在这里插入图片描述][20200309171441536.png]
2.  Error: unsafe value used in a resource URL context  
    目前需要用pipe 来修这个bug，之前直接`return this.sanitizer.bypassSecurityTrustResourceUrl(url);`失效了  
    另外需要注意的一点是如果是在子组件中使用而不是最顶级的`appcomponent`,不能直接在\`app.module.ts’中添加，需要在组件所在的文件夹中添加，比如我的目录结构为share文件夹中有很多组件，就需要在share文件夹下建立一个pipe文件夹，这个文件夹里包含各种pipe以及一个pipe.module.ts文件，文件内容如下

import {  NgModule } from '@angular/core';
    import {  CommonModule } from '@angular/common';
    import {  SafePipe } from './safe.pipe';
    @NgModule({ 
      imports: [
        CommonModule
      ],  
      exports: [
        SafePipe
      ],
      declarations: [SafePipe]
    })
    export class PipesModule {  }

然后再在app.module.ts中引入PipesModule

import {  PipesModule } from './shared/pipes/pipes.module';
    @NgModule({ 
      declarations: [  ],
      imports: [ PipesModule ],
      providers: [],
      bootstrap: [AppComponent]

参考资料：[https://stackoverflow.com/questions/38037760/how-to-set-iframe-src-without-causing-unsafe-value-exception][https_stackoverflow.com_questions_38037760_how-to-set-iframe-src-without-causing-unsafe-value-exception]

**另附所有依赖升级成功后解决语法兼容问题的参考资料：**

1.  rxjs: [https://github.com/ReactiveX/rxjs/blob/master/docs\_app/content/guide/v6/migration.md\#howto-convert-to-pipe-syntax][https_github.com_ReactiveX_rxjs_blob_master_docs_app_content_guide_v6_migration.md_howto-convert-to-pipe-syntax]

**参考资料：**

1.  [https://stackoverflow.com/questions/16073603/how-do-i-update-each-dependency-in-package-json-to-the-latest-version][https_stackoverflow.com_questions_16073603_how-do-i-update-each-dependency-in-package-json-to-the-latest-version]
2.  [https://stackoverflow.com/questions/53096996/angular-cli-error-the-serve-command-requires-to-be-run-in-an-angular-project-b][https_stackoverflow.com_questions_53096996_angular-cli-error-the-serve-command-requires-to-be-run-in-an-angular-project-b]
3.  [https://github.com/angular/angular-cli/issues/12215\#issuecomment-433593036][https_github.com_angular_angular-cli_issues_12215_issuecomment-433593036]
4.  [https://github.com/angular/angular-cli/issues/10396][https_github.com_angular_angular-cli_issues_10396]

[npm-check-updates]: https://www.npmjs.com/package/npm-check-updates
[20200219154358932.png]: https://img-blog.csdnimg.cn/20200219154358932.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzI3MDg4MjUz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200226100926146.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzI3MDg4MjUz,size_16,color_FFFFFF,t_70
[20200309171151246.png]: https://img-blog.csdnimg.cn/20200309171151246.png
[20200309171441536.png]: https://img-blog.csdnimg.cn/20200309171441536.png
[https_stackoverflow.com_questions_38037760_how-to-set-iframe-src-without-causing-unsafe-value-exception]: https://stackoverflow.com/questions/38037760/how-to-set-iframe-src-without-causing-unsafe-value-exception
[https_github.com_ReactiveX_rxjs_blob_master_docs_app_content_guide_v6_migration.md_howto-convert-to-pipe-syntax]: https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#howto-convert-to-pipe-syntax
[https_stackoverflow.com_questions_16073603_how-do-i-update-each-dependency-in-package-json-to-the-latest-version]: https://stackoverflow.com/questions/16073603/how-do-i-update-each-dependency-in-package-json-to-the-latest-version
[https_stackoverflow.com_questions_53096996_angular-cli-error-the-serve-command-requires-to-be-run-in-an-angular-project-b]: https://stackoverflow.com/questions/53096996/angular-cli-error-the-serve-command-requires-to-be-run-in-an-angular-project-b
[https_github.com_angular_angular-cli_issues_12215_issuecomment-433593036]: https://github.com/angular/angular-cli/issues/12215#issuecomment-433593036
[https_github.com_angular_angular-cli_issues_10396]: https://github.com/angular/angular-cli/issues/10396