Angular оновився до версії 5.1

Вийшло невелике оновлення JS-фреймворка Angular 5.1. У список поліпшень входять стабільні версії Angular Material і CDK, підтримка Service Worker API в CLI і підтримка TypeScript 2.5.

Після виходу мажорного релізу Angular 5.0 минулого місяця команда оголосила про випуск коригуючого поновлення Angular 5.1.0, в якому з’явилося кілька дрібних фич і виправлені деякі помилки. Також був випущений Angular CLI 1.6 і представлена перша стабільна версія Angular Material.

Що нового?

  • стабільні версії Angular Material і CDK;
  • підтримка Service Worker API в CLI;
  • поліпшена підтримка Universal і AppShell в CLI;
  • доопрацьовані повідомлення про помилки декоратора;
  • підтримка TypeScript 2.5.

Повний список функцій і виправлень можна подивитися на сторінках Angular, Material, і CLI.

Стабільні версії Angular Material і CDK

Angular Material заснований на візуальному мовою Material Design від Google. Angular Material пропонує 30 компонентів для користувача інтерфейсу для створення додатків. Angular CDK являє собою набір компонентів для створення власних елементів, без необхідності вирішувати заново спільні завдання. Ці компоненти вже використовуються у виробництві поряд додатків Google, включаючи Google Analytics Suite , Google Cloud Platform Developer Console , і Google Shopping Express .

Починаючи з поточної версії, Angular Material буде дотримуватися тієї ж філософії SemVer, що і Angular. Основні версії Angular Material і Angular CDK виходитимуть одночасно з рештою платформою. Патч-релізи будуть випускатися з тижневими інтервалами, а другорядні випуски стануть доступні у міру готовності функцій.

Документація і посібник для початківців доступні на офіційному сайті. Також стежити за ходом роботи команди можна на сторінці проекту на GitHub.

Підтримка Service Worker в CLI 1.6

У Angular 5.0.0 була включена підтримка Service Worker, адаптованої для Angular-додатків. Angular CLI 1.6 підтримує функції, які залежать нову функцію. За твердженням команди розробників, використання @angular/service-worker може підвищити продуктивність завантаження додатків в браузерах, які підтримують даний API.

Детальніше про початок роботи c Angular Service Worker можна ознайомитися на сайті.

Покращена підтримка Universal і App Shell в CLI 1.6

З виходом Angular CLI 1.6 доопрацьована можливість впровадження Universal в існуючі проекти через Schematics. Також додана підтримка App Shell.

Angular Universal

Наступна команда дозволяє додати підтримку Universal в існуюче CLI-додаток:

ng generate universal

Це створить модуль Universal в поточному додатку і автоматично сконфигурирует файл angular-cli.json.

Створити Universal додаток:

ng build --app=

Підтримка App Shell

З додаванням підтримки архітектури App Shell, з’явилася можливість створити оболонку додатки, яка створить статичний «перший екран» під час завантаження програми.

Спочатку необхідно імпортувати RouterModule в NgModule додатки, а <router-outlet></router-outlet> в шаблон компонента програми. App Shell використовує маршрутизатор для рендера додатки.

Потім запускається команда:

ng generate app-shell [ --universal-app ] [ --route ]

Далі необхідно зібрати додаток використовуючи ng build і маршрут з вашого застосування має активізуватися в index.html файл.

Доопрацьовані повідомлення про помилки декораторів

Діагностика компілятора значно покращилася, особливо в тих випадках, коли декоратори містять не підтримуються або некоректні висловлювання.

Наприклад, виклик функції для створення шаблону не тримається

@Component({
  template: genTemplate()
})
export class MyComponent {}

Раніше це викликало б наступну помилку:

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'or npm install typescript@'~2.5.3'.

Але дана дія не є обов’язковим, оскільки TypeScript 2.4 продовжує підтримуватися Angular 5.xx Підтримку TypeScript 2.6 команда планує додати в наступному оновленні.

Переклад статті “Angular 5.1 & More Now Available