Angular Update Guide - 4.0 -> 5.0 for Advanced Apps
Before updating
(1)Stop using DefaultIterableDiffer, KeyValueDiffers#factories, or IterableDiffers#factories
停止使用DefaultIterableDiffer,KeyValueDiffers 和IterableDiffers
目前项目的情况:DefaultIterableDiffer(没有),KeyValueDiffers(assets下的库在使用),IterableDiffers(项目代码在使用)
注意IterableDiffers这个方法factories不能使用,目前项目没有使用factories,而是使用了IterableDiffers中的find方法。
所以第一条通过!
(2)Rename your template tags to ng-template
项目中没有使用
所以第二条通过!
(3)Replace OpaqueTokens with InjectionTokens.
项目中没有使用OpaqueTokens
所以第三条通过!
(4)If you call DifferFactory.create(...) remove the ChangeDetectorRef argument.
项目中没有使用DifferFactory
所以第四条通过!
(5)Stop passing any arguments to the constructor for ErrorHandler
项目中没有使用ErrorHandler
所以第五条通过!
(6)If you use ngProbeToken, make sure you import it from @angular/core instead of @angular/platform-browser
项目中没有使用ngProbeToken
所以第六条通过!
(7)If you use TrackByFn, instead use TrackByFunction
项目中没有使用TrackByFn
所以第七条通过!
(8)If you import any animations services or tools from @angular/core, you should import them from @angular/animations
项目中没有发现
所以第八条通过!
(9)Replace ngOutletContext with ngTemplateOutletContext.
项目中没有发现
所以第九条通过!
(10)Replace CollectionChangeRecord with IterableChangeRecord
项目中没有发现
所以第十条通过!
(11)Anywhere you use Renderer, now use Renderer2
项目中没有发现
所以第十一条通过!
(12)If you use preserveQueryParams, instead use queryParamsHandling
项目中没有发现
所以第十二条通过!
During the update
(1)If you rely on the date, currency, decimal, or percent pipes, in 5 you will see minor changes to the format. For applications using locales other than en-us you will need to import it and optionally locale_extended_fr from @angular/common/i18n_data/locale_fr and registerLocaleData(local).
如果您依赖日期,货币,小数或百分比管道,您将在5中看到格式的细微变化。 对于使用除en-us之外的语言环境的应用程序,您将需要 import it and optionally locale_extended_fr from @angular/common/i18n_data/locale_fr and registerLocaleData(local).
(1)Switch from HttpModule and the Http service to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (You don't need to map to json anymore) and now supports typed return values and interceptors. Read more on angular.io
从HttpModule和Http服务切换到HttpClientModule和HttpClient服务。 HttpClient简化了默认的人机工程学(你不需要再映射到json),现在支持类型化的返回值和拦截器。 阅读更多关于angular.io
(2)if you use DOCUMENT from @angular/platform-browser, you should start to import this from @angular/common
如果您使用@ angular / platform-browser中的DOCUMENT,则应该从@ angular / common中开始导入
(3)Anywhere you use ReflectiveInjector, now use StaticInjector
在任何地方使用ReflectiveInjector,现在使用StaticInjector
(4)Choose a value of off preserveWhitespaces in your tsconfig.json to gain the benefits of this setting while the default is still to preserve whitespace.
在tsconfig.json中选择关闭preserveWhitespaces的值以获得此设置的好处,而默认值仍然保留空白。
(5)For each RxJS Operator you import, you should now import from 'rxjs/operators' and use the pipe operator`. Read more
升级之前可以阅读这个文档,有人升级过了:http://www.bubuko.com/infodetail-2412608.html
一、首先在这里看一下升级时候需要做的变更https://angular-update-guide.firebaseapp.com/ 变更如下:
Angular Update Guide - 4.0 -> 5.0 for Advanced Apps
Before updating
(1)Stop using DefaultIterableDiffer, KeyValueDiffers#factories, or IterableDiffers#factories 停止使用DefaultIterableDiffer,KeyValueDiffers 和IterableDiffers 目前项目的情况:DefaultIterableDiffer(没有),KeyValueDiffers(assets下的库在使用),IterableDiffers(项目代码在使用) 注意IterableDiffers这个方法factories不能使用,目前项目没有使用factories,而是使用了IterableDiffers中的find方法。
所以第一条通过! (2)Rename your template tags to ng-template 项目中没有使用 所以第二条通过! (3)Replace OpaqueTokens with InjectionTokens. 项目中没有使用OpaqueTokens 所以第三条通过! (4)If you call DifferFactory.create(...) remove the ChangeDetectorRef argument. 项目中没有使用DifferFactory 所以第四条通过! (5)Stop passing any arguments to the constructor for ErrorHandler 项目中没有使用ErrorHandler 所以第五条通过! (6)If you use ngProbeToken, make sure you import it from @angular/core instead of @angular/platform-browser 项目中没有使用ngProbeToken 所以第六条通过! (7)If you use TrackByFn, instead use TrackByFunction 项目中没有使用TrackByFn 所以第七条通过! (8)If you import any animations services or tools from @angular/core, you should import them from @angular/animations 项目中没有发现 所以第八条通过! (9)Replace ngOutletContext with ngTemplateOutletContext. 项目中没有发现 所以第九条通过! (10)Replace CollectionChangeRecord with IterableChangeRecord 项目中没有发现 所以第十条通过! (11)Anywhere you use Renderer, now use Renderer2 项目中没有发现 所以第十一条通过! (12)If you use preserveQueryParams, instead use queryParamsHandling 项目中没有发现 所以第十二条通过!
During the update
(1)If you rely on the date, currency, decimal, or percent pipes, in 5 you will see minor changes to the format. For applications using locales other than en-us you will need to import it and optionally locale_extended_fr from @angular/common/i18n_data/locale_fr and registerLocaleData(local). 如果您依赖日期,货币,小数或百分比管道,您将在5中看到格式的细微变化。 对于使用除en-us之外的语言环境的应用程序,您将需要 import it and optionally locale_extended_fr from @angular/common/i18n_data/locale_fr and registerLocaleData(local).
项目中没有发现 所以第一条通过! 如果有
(2)Do not rely on gendir, instead look at using skipTemplateCodeGen. Read more 看看这个连接:https://github.com/angular/angular/issues/19339#issuecomment-332607471
(3)Update all of your dependencies to the latest Angular and the right version of TypeScript. If you are using Linux/Mac, you can use:
npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'
npm install typescript@2.4.2 --save-exact
After the update
(1)Switch from HttpModule and the Http service to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (You don't need to map to json anymore) and now supports typed return values and interceptors. Read more on angular.io 从HttpModule和Http服务切换到HttpClientModule和HttpClient服务。 HttpClient简化了默认的人机工程学(你不需要再映射到json),现在支持类型化的返回值和拦截器。 阅读更多关于angular.io
(2)if you use DOCUMENT from @angular/platform-browser, you should start to import this from @angular/common 如果您使用@ angular / platform-browser中的DOCUMENT,则应该从@ angular / common中开始导入
(3)Anywhere you use ReflectiveInjector, now use StaticInjector 在任何地方使用ReflectiveInjector,现在使用StaticInjector
(4)Choose a value of off preserveWhitespaces in your tsconfig.json to gain the benefits of this setting while the default is still to preserve whitespace. 在tsconfig.json中选择关闭preserveWhitespaces的值以获得此设置的好处,而默认值仍然保留空白。
(5)For each RxJS Operator you import, you should now import from 'rxjs/operators' and use the pipe operator`. Read more
https://github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md
https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md