翻譯自angular.io上的關於4.0.0版本發佈的文章,內容主要是介紹了4.0.0版本下的改進以及接下來還會有的其他更新,4.0.0其實已經出來好多天了,截止目前都已經到了4.0.1版本了,這也是前兩日筆者一時興起拿想ng2寫個自己的新網站時安裝angular時無意發現幾個模板與組件聲明時的錯誤 ...
翻譯自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的穩定版本,以及包庫作者的導覽。