NG2&4折腾记 --- 记NG2升级NG4 RC1之修正问题跑起来
Posted crper
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了NG2&4折腾记 --- 记NG2升级NG4 RC1之修正问题跑起来相关的知识,希望对你有一定的参考价值。
前言
尝试把正式项目NG2.X升级到RC1。。修正一些问题可以正确跑起来,等下回滚嗯。。。
问题1:template标签已经废弃了
- 信息来源:启动的时候控制台有提示,官方日志也有说
- 解决方案:全局搜索 ,替换
<ng-template></ng-template>
问题2: 动画已经独立出一个专门的模块
信息来源:官方文档,及手动不信邪尝试【动画的一些引入已经不包含在
@angular/core
】了;解决方案:
手动搜索引入动画的页面,还好之前有过分离一下,改起来不是很多(个别写在components的比较难找)
// 1. 先把动画模块安装上
cnpm install -S @angular/animations; [-S : save ]
// 2.在根模块注入相关的模块(app.module.ts)
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
// 3. 之后和平时使用动画差不多,在需要的地方引入相关的指令,接口什么的
import { trigger, state, style, transition, animate } from ‘@angular/animations‘;
问题3: 代码需要更加严谨和严格【可能是升级到TS2.1+的原因,亦或者内部啥的】
举个栗子
// 之前的代码 =》会提示报错
// 获取当前URL -- 本来就是简单一个获取url的检测对象
this.router.events.subscribe((evt) => {
console.log(evt);
this.current_url = evt.url;
this.isExpend(evt.url);
});
// 修正 -- 需要给传入参数指定对应的类型;
// 我是特意去打印出来,有什么鬼,一一指定,,懒的可以直接指定:any
// 获取当前URL
this.router.events.subscribe((evt: { id: number, url: string, urlAfterRedirects: string }): void => {
console.log(evt);
this.current_url = evt.url;
this.isExpend(evt.url);
});
至此我的项目基本跑起来了,动画什么也正常了,等会回退下。
说完这些破问题,来说NG4有什么亮点?**
NG4的亮点
- 新的视图引擎,据说能让渲染更快
- 加强了
*ngIf
,里面可以写else
了,这里直接拿官方的写法
<ng-template #loading>Loading...</ng-template>
<div *ngIf="userObservable | async; else loading; let user">
{{ user.name }}
</div>
- 动画独立出模块,可以自行选择是否引入来控制打包的体积
- 升级到TS2.1
- 内部编译可以使用
StrictNullChecks
– null判断 - 通用? 没深究,大概的意思是服务端也可以跑NG,换个名字”服务端渲染!!”
- 模块扁平化,
rollup
的tree-shaking
特性,没使用到的模块不再打包进去 - 支持ES2015模块化写法进行扁平化
总结
正式项目还是不推荐升级到ANGULAR 4 RC1
哈,反正下个月正式版就发布了;
再打一次辟谣:NG2->NG4不是重构,只是常规升级【统一版本而已,目前路由是3.x】,
NG团队说以后不再以版本号为核心,统称angular,下半年NG5要出来了。。。
以上是关于NG2&4折腾记 --- 记NG2升级NG4 RC1之修正问题跑起来的主要内容,如果未能解决你的问题,请参考以下文章
Angular 组件升级实战:将项目中的ng2-tree组件替换成ngx-tree