从angular5 升级到angular9(最新版本)

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

以下方法适用于想一次性升级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.
    在这里插入图片描述
    这个原因是新的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 格式,另外tslint.json不能为空,为空也会报错。
需检查的文件的文件名
在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}, 如图所示
    在这里插入图片描述
    在这里插入图片描述
  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

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

  1. rxjs: 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
  2. 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
  4. https://github.com/angular/angular-cli/issues/10396
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值