天天看點

Angular5.1以及更多可用功能

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

新特性

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

有關功能和bug修複的完整清單,請參閱

Angular

Material

CLI

的更新日志。

在釋出了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修複的版本将按照每周的疊代進行,而次版本将在功能完成時釋出。

通路

material.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>           

額外添加的功能是對

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

首先,確定在你的應用中的NgModule中有一個RouterModule的子產品被導入,以及有一個<router-outlet></router-outlet>在你應用元件的子產品中。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 function ‘genTemplate’, 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。我們的計劃實在未來的次版本中添加支援。

<stong>重要提示:</stong>如果你的代碼使用injector.get(Token),Token有靜态成員,那麼你将遇到

TypeScript的問題

,傳回的類型是{}而不是Token。你可以使用Injector.get<Token>(Token)來獲得争取的傳回值。

原文位址:

https://blog.angular.io/angular-5-1-more-now-available-27d372f5eb4e

原文釋出時間為:2017年12月19日

原文作者:

我是鐘鐘

本文來源:

開源中國

如需轉載請聯系原作者

繼續閱讀