yitim

翻译自angular.io上的关于4.0.0版本发布的文章,内容主要是介绍了4.0.0版本下的改进以及接下来还会有的其他更新,4.0.0其实已经出来好多天了,截止目前都已经到了4.0.1版本了,这也是前两日笔者一时兴起拿想ng2写个自己的新网站时安装angular时无意发现几个模板与组件声明时的错误提示变得极其精准,一看发现angular版本居然都到4.x了并且依赖里提示还要多安装一个@angular/animation的包。看来谷歌没有食言,真的可以追赶iphone的更新脚步了。

 

angular 4.0.0 现在可用了
angular 4.0.0 版本现在已经悄悄的完成可用了。这是依据announced adoption of Semantic Versioning文章发布的一个主要版本,并且向下兼容绝大多数基于2.x.x版本的应用。
我们很激动的来社区分享这一发布,它包含了一些主要的提升与我们过去三个月工作完成的功能。我们致力于确保开发者能很容易的更新到这一发布版本。

 

什么是新的


更小&更快
这一版本我们履行了我们的诺言来让angular应用更小且更快。绝不是说现在我们已经做到了,但你会看到我们将在接下来几个月做出更远的提升。


视图引擎
我们更改了AOT方式下的代码。这些更改减少了约60%生成的组件的代码的量。你的组件越复杂,节省的代码也就越多。
在接下来的补充时期,我们听到了很多迁移到4版本的开发者反馈说他们的产品最后压缩减少了数百kb的量。
你可以在Design Doc中查看更多关于视图引擎的内容。


动画包
我们现在将动画移出@angular/core到了单独的包中。这意味着如果你不使用动画,这一额外的代码就不会被绑定到你最终的产品代码中。
这一更改同时允许你更容易的查找文档来收益于自动补全功能。你可以通过引入@angular/platform-browser/animations中的BrowserAnimationsModule来添加自己的动画到你的主NgModule中。


新特性


改进*ngIf和*ngFor
我们的模板绑定语法现在有了两个有用的改动。你现在可以使用if/else风格的语法,并且在展示一个可观察变量时分配给本地变量。
<div *ngIf="userList | async as users; else loading">
<user-profile *ngFor="let user of users; count as count" [user]="user">
</user-profile>
<div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template>


angular Universal
Universal工程允许开发者运行angular在一个服务器上,现在也更新到最新了,并且这是从Universal本本后的第一次发布,最初只是一个社区驱动的项目,现在被angular团队采用了。这一发布现在包含了Universal团队这几个月来内在的与外在的成果。主要的Universal代码现在被放在@angular/platform-server中。
为了学习更多Angular Universal的内容,可以查看新的@angular/platform-server中的 renderModuleFactory 方法,或者Rob Wormald的Demo Repository。更多的文档与代码示例即将到来。


TS2.1与TS2.2兼容
我们更新了angular到更新的TS版本,这将会强化ngc的速度,你可以得到更强的类型检查支持。


模板的SourceMap
现在,当有因为你的模板代码造成的错误时,我们将会生成source map来给出有意义的原始模板上下文错误。

 

包更改


Flat ES Module(Flat ESM/FESM)
我们现在装载我们的模块的扁平版本(在example file查看我们代码在EcmaScript模块格式下的rolledup版本)。这一格式能帮助摇树优化,帮助减少你生成的压缩代码的大小,并且加快构建,编译与在浏览器中确定场景的速度。
在 "The cost of small modules"中查看更多关于Flat ES Modules的改进。


实验性的ES2015构建
我们同样装载我们的包在ES2015 Flat ESM 格式下。这一选项还是实验性的且可选的。开发者反馈压缩大小节省了超过7%。想要尝试这些新的包,你可以配置你的构建工具链来配置package.json中的es2015属性来替换原有的module属性


实验性的闭包兼容
我们的全部代码现在都有了闭包的注释,来帮助进行进一步的闭包优化,以得到更小的压缩代码以及更优的摇树优化。

更新到4.0.0


更新到4很简单,差不多就像是将你的angular依赖更新到最新版本,并且做两个检查如果你想要动画功能的话。这在大多数情况下都有效:


Linux/Mac下:
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save
Windows下:
npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

然后运行你常用的ng serve或者 npm start指令,一切都将很顺利。
如果你依赖于动画,引入@angular/platform-browser/animations中的BrowserAnimationsModule到你的根模块中。如果不这么做,你的代码也会运行,但是动画将报错。从@angular/core引入动画已经弃用了,你需要从@angular/animations中引入{ trigger, state, style, transition, animate }这些东西。

我们正在生产Angular Update Guide如果你想要查看更多你的应用需要做出的改变的话。



已知问题


4版本的一个目标是确保angular兼容TS的strictNullChecks设定,允许更严格的类型约束的子集。我们发现在RC时期这会做更多的工作来确保这能在所有使用场景下起作用,所以我们有意让4版本不兼容strictNullChecks设定,来避免急切采用这一TS模式而破坏了app,并在4.1版本时会适当的支持。(tracking issue is #15432)



下一步做什么
我们正致力于接下来六个月的路线图,依据我们在2.x版本时的 published release schedule。你将会看到我们已经开始了4.0版本来给4.0.0版本做补丁。我们将继续使angular更小且更快,并且我们将实验性的进化比如@angular/http, @angular/service-worker以及@angular/language-service这些模块的能力。

你同样应该保持关注我们的文档,包括CLI的稳定版本,以及包库作者的导览。

分类:

技术点:

相关文章:

猜你喜欢