Condivisione delle nuove funzionalità di Angular 5.1

Questo articolo ha condiviso in dettaglio le migliorie e le nuove funzionalità aggiunte in Angular 5.1, attraverso la presentazione delle nuove funzionalità di Angular 5.1. Di seguito è riportato tutto il contenuto:

Nuove funzionalità

Versione stabile di Angular Material e CDK

Supporto per Service Worker nel CLI

Miglioramenti nel supporto di Universal e AppShell nel CLI

Miglioramenti alle informazioni di errore dei decoratori

Supporta TypeScript 2.5

Per una lista completa di funzionalità e correzioni di bug, consulta il log delle aggiornamenti di Angular, Material e CLI.

Versione stabile di Angular Material e CDK

Dopo aver rilasciato 11 versioni alpha, 12 versioni beta e 3 versioni candidate, siamo lieti di poter ora etichettare la versione stabile 5.0.0 di Angular Material e Angular CDK. Basato sul linguaggio di progettazione visiva Material Design di Google, Angular Material fornisce 30 componenti UI per le tue applicazioni Angular. Utilizzando in combinazione Angular CDK, il Component Development Kit (CDK) di Angular fornisce un insieme di moduli per aiutarti a costruire i tuoi componenti personalizzati senza dover risolvere di nuovo problemi comuni. Questi componenti sono stati utilizzati in molte applicazioni Google (inclusi Google Analytics Suite, Google Cloud Platform Developer Console e Google Shopping Express) in produzione.

从这个版本开始，Angular Material将遵循与Angular相同的语义化哲学，主版本的Angular Material和Angular CDK同时作为其它平台的主版本发布。bug修复的版本将按照每周的迭代进行，而次版本将在功能完成时发布。

访问matrial.angular.io获取文档，演示和我们的入门指南。你还可以在Github上跟进我们的进度，因为我们将继续为框架添加更多内容。在接下来的几个月中，请关注诸如新的mat-tree，virtual scrolling，组件测试套件以及拖放功能。

CLI1.6的Service Worker支持

性能一直是Web开发人员的一个重要目标，在今天的局域网WIFI和移动网络事件中，性能一直是一个重要的目标。现代浏览器有一个新的API用于构建可靠且快速加载的站点，称为Service Worker API。

Angular 5.0.0附带了一个为Angular应用程序定制的新的Service Worker实现，而Angular CLI 1.6包含了支持利用这个新特性构建应用的功能。使用@angular/service-worker可以提升你的应用的加载性能在支持该API的浏览器中，以及使你的应用的加载体验更像是本地app。

在我们的文档网站中，学习更多关于Angular Service的内容。

CLI1.6 改进Universal和App Shell支持

此外，随着Angular CLI 1.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

Aggiunta di funzionalità aggiuntive di supporto per App Shell. Ora puoi generare e costruire un'app shell che utilizza Universal per costruire una renderizzazione iniziale statica nella tua pagina index.html. Quando il tuo applicazione sta avviando, questo fornirà agli utenti una migliore esperienza utente.

Prima di tutto, assicurati che nel tuo modulo NgModule ci sia un modulo RouterModule importato, e che ci sia un <router-outlet></router-outlet> nel modulo del componente della tua applicazione. App Shell utilizza le rotte per rendere la tua applicazione.

Esegui i seguenti comandi:

ng generate app-shell [ --universal-app <nome-app-universale>] [ --route <rotta>]

Passando il parametro app-shell, aggiungi il supporto per l'intero shell dell'applicazione al file angular-cli.json. Se l'applicazione universale non è passata, la prima esecuzione dello schema universale creerà un'applicazione universale. I parametri di rotta specificano la configurazione delle rotte generate durante la generazione dell'applicazione. (App Shell deve avere il supporto per le rotte). Per default è /shell.

Dopo aver completato questo passaggio, è sufficiente eseguire ng build per costruire correttamente l'applicazione, il file index.html conterrà le rotte renderizzate automaticamente.

Informazioni di errore migliorate dei decoratori

Le diagnosi generate dal compilatore sono state significativamente migliorate, in particolare quando i decoratori contengono espressioni non supportate o errate.

Ad esempio: chiamare una funzione per gestire il template non è supportato.

@Component({
 template: genTemplate()
)

Questo è l'errore che si poteva verificare in precedenza:

Errore riscontrato risolvendo valori simbolici staticamente. Chiamata alla funzione ‘genTemplate', le chiamate di funzione non sono supportate. Considera di sostituire la funzione o lambda con un riferimento a una funzione esportata, risolvendo il simbolo MyComponent in components.ts, risolvendo il simbolo MyComponent in components.ts

Questo errore è stato migliorato e chiarito la fonte e la natura del problema.

component.ts(9,16): Errore durante la compilazione del template di 'MyComponent'.
 Le chiamate di funzione non sono supportate nei decoratori ma è stato chiamato 'genTemplate'.

Supporta TypeScript 2.5

Abbiamo aggiunto il supporto per TypeScript 2.5, che è raccomandato da tutti gli sviluppatori. Questa versione di TypeScript include alcune funzionalità avanzate utili.

Puoi aggiornare il tuo TypeScript tramite yarn add typescript@'~2.5.3' o npm install typescript@'~2.5.3'.

Questa aggiornamento è opzionale, TypeScript 2.4 continua a supportare Angular 5.X non supportiamo TypeScript 2.6. Il nostro piano è aggiungere il supporto nelle prossime versioni.

<strong>Avviso importante:</strong> Se il tuo codice utilizza injector.get(Token), Token ha membri statici, allora incontrerai problemi TypeScript, il tipo di ritorno è { } invece di Token. Puoi ottenere il valore di ritorno desiderato utilizzando Injector.get<Token>(Token).