本篇文章通過(guò)介紹Angular5.1新特性給大家詳細(xì)分享了的5.1改進(jìn)和增加的內(nèi)容，以下是全部?jī)?nèi)容：

新特性

Angular Material和CDK穩(wěn)定版

CLI中支持Service Worker

在CLI中改進(jìn)了Universal和AppShell的支持

改進(jìn)了裝飾器的錯(cuò)誤信息

支持TypeScript2.5

有關(guān)功能和bug修復(fù)的完整列表，請(qǐng)參閱Angular，Material和CLI的更新日志。

Angular Material和CDK穩(wěn)定版

在發(fā)布了11個(gè)alpha版本，12個(gè)beta版本以及3個(gè)候選版本之后，我們很高興現(xiàn)在能夠標(biāo)記Angular Material和Angular CDK的5.0.0的穩(wěn)定版?；贕oogle的Material Design視覺(jué)設(shè)計(jì)語(yǔ)言，Angular Material提供了30個(gè)UI組件給你的Angular應(yīng)用。組合使用Angular CDK，Angular CDK（組件開(kāi)發(fā)工具包）提供了一組構(gòu)建模塊，幫組您構(gòu)建自己的定制組件，而不需要再次解決常見(jiàn)問(wèn)題。這些組件已經(jīng)被許多GOogle應(yīng)用程序（包括Google Analytics套件，Google云平臺(tái)開(kāi)發(fā)人員控制臺(tái)以及Google Shopping Express）用于生產(chǎn)。

從這個(gè)版本開(kāi)始，Angular Material將遵循與Angular相同的語(yǔ)義化哲學(xué)，主版本的Angular Materital和Angular CDK同時(shí)作為其它平臺(tái)的主版本發(fā)布。bug修復(fù)的版本將按照每周的迭代進(jìn)行，而次版本將在功能完成時(shí)發(fā)布。

訪問(wèn)matrial.angular.io獲取文檔，演示和我們的入門(mén)指南。你還可以在Github上跟進(jìn)我們的進(jìn)度，因?yàn)槲覀儗⒗^續(xù)為框架添加更多類容。在接下來(lái)的幾個(gè)月中，請(qǐng)關(guān)注諸如新的mat-tree，virtual scrolling，組件測(cè)試套件以及拖放功能。

CLI1.6的Service Worker支持

性能一直是Web開(kāi)發(fā)人員的一個(gè)重要目標(biāo)，在今天的局域網(wǎng)WIFI和移動(dòng)網(wǎng)絡(luò)事件中，性能一直是一個(gè)重要的目標(biāo)?，F(xiàn)代瀏覽器有一個(gè)新的API用于構(gòu)建可靠且快速加載的站點(diǎn)，稱為Service Worker API。

Angular5.0.0附帶了一個(gè)為Angular應(yīng)用程序定制的新的Service Worker實(shí)現(xiàn)，而Angular CLI 1.6包含了支持利用這個(gè)新特性構(gòu)建應(yīng)用的功能。使用@angular/service-worker可以提升你的應(yīng)用的加載性能在支持該API的瀏覽器中，以及使你的應(yīng)用的加載體驗(yàn)更像是本地app。

在我們的文檔網(wǎng)站中，學(xué)習(xí)更多關(guān)于Angular Service的內(nèi)容。

CLI1.6 改進(jìn)Universal和App Shell支持

此外，隨著Angular CLI1.6的發(fā)布，更好的通過(guò)Schematics將Universal添加到你現(xiàn)有的項(xiàng)目中，并為App Shell提供支持。

Angular Universal

添加Universal到你當(dāng)前的CLI項(xiàng)目中，你可以在你的項(xiàng)目目錄下使用下面的命令：

npm generate universal <name>

用你想給你的應(yīng)用程序的名字替換<name>。這將會(huì)采用你采用的應(yīng)用程序，并創(chuàng)建一個(gè)通用的模塊，并為你自動(dòng)配置你的angular-cli.json文件。然后你可以跳到我們的指南中的第4步使用Universal。

要構(gòu)建你的Universal應(yīng)用，只需要運(yùn)行以下命令：

ng build --app=<name>

App Shell

額外添加的功能是對(duì)App Shell的支持?，F(xiàn)在你可以生成和構(gòu)建一個(gè)應(yīng)用shell，它使用Universal來(lái)為你的應(yīng)用構(gòu)建一個(gè)靜態(tài)的首次渲染在你的index.html頁(yè)面中。當(dāng)你的應(yīng)用程序正在啟動(dòng)時(shí)，這會(huì)給用戶更好的體驗(yàn)。

首先，確保在你的應(yīng)用中的NgModule中有一個(gè)RouterModule的模塊被導(dǎo)入，以及有一個(gè)<router-outlet></router-outlet>在你應(yīng)用組件的模塊中。App Shell使用路由來(lái)渲染你的應(yīng)用。

運(yùn)行以下命令：

ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]

通過(guò)傳遞app-shell參數(shù)，將對(duì)主應(yīng)用程序的all shell的支持添加到你的angular-cli.json文件中。如果Universal應(yīng)用沒(méi)有通過(guò)，則第一次運(yùn)行Universal Schematic的時(shí)候會(huì)創(chuàng)建一個(gè)Universal應(yīng)用。路由參數(shù)指定了在生成應(yīng)用期間生成的路由配置。（App Shell需要有路由的支持）。默認(rèn)是/shell。

完成這一步之后，只需要使用ng build就可以正常構(gòu)建應(yīng)用程序，index.html文件將包含自動(dòng)渲染的路由。

改進(jìn)的裝飾器錯(cuò)誤信息

由編譯器產(chǎn)生的診斷已經(jīng)得到了明顯的改善，特別是當(dāng)裝飾器包含不支持或不正確的表達(dá)式的時(shí)候。

例如：調(diào)用一個(gè)函數(shù)來(lái)處理模板是不支持的。

@Component({
 template: genTemplate()
})

這是以前會(huì)產(chǎn)生的錯(cuò)誤：

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

這個(gè)錯(cuò)誤已經(jīng)得到改善，并澄清了問(wèn)題的來(lái)源和性質(zhì)。

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

支持TypeScript 2.5

我們已經(jīng)添加了TypeScript 2.5的支持，這是所有的開(kāi)發(fā)人員推薦的。這個(gè)TypeScript版本包含了幾個(gè)有用的高級(jí)功能。

你可以升級(jí)你的Typescript通過(guò)yarn add typescript@'~2.5.3'或者npm install typescript@'~2.5.3'。

這個(gè)更新是可選的，TypeScript 2.4繼續(xù)支持Angular 5.X我們還不支持TypeScript 2.6。我們的計(jì)劃實(shí)在未來(lái)的次版本中添加支持。

<stong>重要提示：</stong>如果你的代碼使用injector.get(Token)，Token有靜態(tài)成員，那么你將遇到TypeScript的問(wèn)題，返回的類型是｛｝而不是Token。你可以使用Injector.get<Token>(Token)來(lái)獲得爭(zhēng)取的返回值。

最新評(píng)論