Angular5.1以及更多可用功能

zhongzhong05發表於2017-12-20

我們很高興的宣佈Angular5.1版本釋出了。這是一個小版本,包含幾個小的功能和bug修復。我們也釋出了Angular Cli的1.6版本,以及Angular Material的第一個穩定版本。

Angular5.1以及更多可用功能

新特性

  • Angular Material和CDK穩定版
  • CLI中支援Service Worker
  • 在CLI中改進了Universal和AppShell的支援
  • 改進了裝飾器的錯誤資訊
  • 支援TypeScript2.5

有關功能和bug修復的完整列表,請參閱AngularMaterialCLI的更新日誌。

Angular Material和CDK穩定版

在釋出了11個alpha版本,12個beta版本以及3個候選版本之後,我們很高興現在能夠標記Angular Material和Angular CDK的5.0.0的穩定版。基於Google的Material Design視覺設計語言,Angular Material提供了30個UI元件給你的Angular應用。組合使用Angular CDK,Angular CDK(元件開發工具包)提供了一組構建模組,幫組您構建自己的定製元件,而不需要再次解決常見問題。這些元件已經被許多GOogle應用程式(包括Google Analytics套件,Google雲平臺開發人員控制檯以及Google Shopping Express)用於生產。

從這個版本開始,Angular Material將遵循與Angular相同的語義化哲學,主版本的Angular Materital和Angular CDK同時作為其它平臺的主版本釋出。bug修復的版本將按照每週的迭代進行,而次版本將在功能完成時釋出。

訪問matrial.angular.io獲取文件,演示和我們的入門指南。你還可以在Github上跟進我們的進度,因為我們將繼續為框架新增更多類容。在接下來的幾個月中,請關注諸如新的mat-tree,virtual scrolling,元件測試套件以及拖放功能。

CLI1.6的Service Worker支援

效能一直是Web開發人員的一個重要目標,在今天的區域網WIFI和行動網路事件中,效能一直是一個重要的目標。現代瀏覽器有一個新的API用於構建可靠且快速載入的站點,稱為Service Worker API

Angular5.0.0附帶了一個為Angular應用程式定製的新的Service Worker實現,而Angular CLI 1.6包含了支援利用這個新特性構建應用的功能。使用@angular/service-worker可以提升你的應用的載入效能在支援該API的瀏覽器中,以及使你的應用的載入體驗更像是本地app。

在我們的文件網站中,學習更多關於Angular Service的內容

CLI1.6 改進Universal和App Shell支援

此外,隨著Angular CLI1.6的釋出,更好的通過Schematics將Universal新增到你現有的專案中,併為App Shell提供支援。

Angular Universal

新增Universal到你當前的CLI專案中,你可以在你的專案目錄下使用下面的命令:

npm generate universal <name>
複製程式碼

用你想給你的應用程式的名字替換<name>。這將會採用你採用的應用程式,並建立一個通用的模組,併為你自動配置你的angular-cli.json檔案。然後你可以跳到我們的指南中的第4步使用Universal。

要構建你的Universal應用,只需要執行以下命令:

ng build --app=<name>
複製程式碼

App Shell

額外新增的功能是對App Shell的支援。現在你可以生成和構建一個應用shell,它使用Universal來為你的應用構建一個靜態的首次渲染在你的index.html頁面中。當你的應用程式正在啟動時,這會給使用者更好的體驗。

首先,確保在你的應用中的NgModule中有一個RouterModule的模組被匯入,以及有一個在你應用元件的模組中。App Shell使用路由來渲染你的應用。

執行以下命令:

ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]
複製程式碼

通過傳遞app-shell引數,將對主應用程式的all shell的支援新增到你的angular-cli.json檔案中。如果Universal應用沒有通過,則第一次執行Universal Schematic的時候會建立一個Universal應用。路由引數指定了在生成應用期間生成的路由配置。(App Shell需要有路由的支援)。預設是/shell。

完成這一步之後,只需要使用ng build就可以正常構建應用程式,index.html檔案將包含自動渲染的路由。

改進的裝飾器錯誤資訊

由編譯器產生的診斷已經得到了明顯的改善,特別是當裝飾器包含不支援或不正確的表示式的時候。

例如:呼叫一個函式來處理模板是不支援的。

@Component({
  template: genTemplate()
})

複製程式碼

這是以前會產生的錯誤:

Error encountered resolving symbol values statically. Calling functiongenTemplate’, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol MyComponent in components.ts, resolving symbol MyComponent in components.ts
複製程式碼

這個錯誤已經得到改善,並澄清了問題的來源和性質。

component.ts(9,16): Error during template compile of 'MyComponent'.
  Function calls are not supported in decorators but 'genTemplate' was called.
複製程式碼

支援TypeScript 2.5

我們已經新增了TypeScript 2.5的支援,這是所有的開發人員推薦的。這個TypeScript版本包含了幾個有用的高階功能。

你可以升級你的Typescript通過yarn add typescript@'~2.5.3'或者npm install typescript@'~2.5.3'

這個更新是可選的,TypeScript 2.4繼續支援Angular 5.X我們還不支援TypeScript 2.6。我們的計劃實在未來的次版本中新增支援。

重要提示:如果你的程式碼使用injector.get(Token),Token有靜態成員,那麼你將遇到TypeScript的問題,返回的型別是{}而不是Token。你可以使用Injector.get(Token)來獲得爭取的返回值。

原文地址:https://blog.angular.io/angular-5-1-more-now-available-27d372f5eb4e

相關文章