NG2&4折腾记 --- 记NG2升级NG4 RC1之修正问题跑起来

前言

尝试把正式项目NG2.X升级到RC1。。修正一些问题可以正确跑起来,等下回滚嗯。。。


问题1:template标签已经废弃了

  • 信息来源:启动的时候控制台有提示,官方日志也有说
  • 解决方案:全局搜索<template></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的亮点

  1. 新的视图引擎,据说能让渲染更快
  2. 加强了*ngIf,里面可以写else了,这里直接拿官方的写法<ng-template #loading>Loading...</ng-template> <div *ngIf="userObservable | async; else loading; let user"> {{ user.name }} </div>复制代码
  3. 动画独立出模块,可以自行选择是否引入来控制打包的体积
  4. 升级到TS2.1
  5. 内部编译可以使用StrictNullChecks -- null判断
  6. 通用? 没深究,大概的意思是服务端也可以跑NG,换个名字"服务端渲染!!"
  7. 模块扁平化,rolluptree-shaking特性,没使用到的模块不再打包进去
  8. 支持ES2015模块化写法进行扁平化

总结

正式项目还是不推荐升级到ANGULAR 4 RC1哈,反正下个月正式版就发布了;

再打一次辟谣:NG2->NG4不是重构,只是常规升级【统一版本而已,目前路由是3.x】, NG团队说以后不再以版本号为核心,统称angular,下半年NG5要出来了。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏刘望舒

Flutter从配置安装到填坑指南详解

7454
来自专栏每日一篇技术文章

带你入坑01-weex-搭建环境

安装 Node.js 环境成功后,npm 包管理工具也会自动安装成功 输入下面命令检查一下

1121
来自专栏北京马哥教育

Python操作OpenOffice

OpenOffice是一个免费的、开源的办公套装,集成了允许开发者用不同语言进行开发的API。Python-UNO让你可以在Python环境下使用OpenOff...

9358
来自专栏Wordpress专用主机|主题模板|必备插件

如何手动配置WordPress浏览器缓存

5755
来自专栏Flutter入门到实战

开发工具总结(10)之Flutter从配置安装到填坑指南详解

版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.jianshu.com/p/399c01657920

2481
来自专栏王磊的博客

聊聊excel生成图片的几种方式

目录     I:需求。    II:实现思路。     III:实现方式。     IV:优缺点分析。     V:结论。     VI:wps安装与配置。 ...

36311
来自专栏赵俊的Java专栏

Hexo搭建 --- 3、Hexo发布文章详解

2182
来自专栏FreeBuf

闲话文件上传漏洞

文件上传漏洞是web安全中经常利用到的一种漏洞形式。这种类型的攻击从大的类型上来说,是攻击 数据与代码分离原则 的一种攻击。 一些web应用程序中允许上传图片,...

4577
来自专栏PHP在线

[技巧]丰富的phpstorm编辑器配色方法

1 打开编辑器 phpstorm菜单找到preferences,MAC快捷键[command+,],Editor->Colors&font->font 在此处设...

3815
来自专栏逢魔安全实验室

RPO攻击技术浅析

? ? 01 — 什么是RPO攻击? RPO(Relative Path Overwrite)相对路径覆盖,是一种新型攻击技术,最早由GarethHeyes在...

4575

扫码关注云+社区

领取腾讯云代金券