Головна » Розробка, Статті » Зустрічайте нову версію Angular - Angular 5 | MarkupUA

Зустрічайте нову версію Angular – Angular 5

Ми раді оголосити версію 5.0.0 Angular, pentagonal-donut. Це основний реліз, що містить нові функції та виправлення помилок. Цей реліз продовжує концентруватися на тому, щоб зробити Angular меншим, швидшим і простішим у використанні.

Angular 5

Ось розбивка деяких найбільших змін у v5. Для повного списку перегляньте історію змін.

Oптимізатор збірки

Станом на 5.0.0, виробничі збірки, створені за допомогою CLI, за замовчуванням застосують оптимізатор збірки.

Оптимізатор збірки – це інструмент, який входить до нашого CLI для зменшення розшарування, використовуючи наше семантичне розуміння Вашого кутового застосування.

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

Друга справа, що робить оптимізатор збірки, полягає в тому, щоб видалити Angular декоратори з коду виконання програми. Декоратори використовуються компілятором, і не потрібні під час виконання, і їх можна видалити. Кожна з цих завдань зменшує розмір ваших пакетів JavaScript і збільшує швидкість завантаження вашої програми для ваших користувачів.

Angular Universal State Transfer API та підтримка DOM

Тепер ви можете легше розділити стан програми між сторонніми та клієнтськими версіями вашої програми.

Angular Universal – це проект, спрямований на те, щоб допомогти розробникам виконувати серверну обробку (SSR) кутових програм. Після того, як ви зробите свої Angular програми на сервері, а потім завантажите їх у горі сгенерированного HTML, ви можете додати підтримку скребків і сканерів, які не підтримують JavaScript, і ви можете збільшити сприйману продуктивність вашої програми.

У 5.0.0 команда додала ServerTransferStateModuleі відповідну BrowserTransferStateModule. Цей модуль дозволяє генерувати інформацію як частину вашого рендеринга на платформі-сервері, а потім перенести його на сторону клієнта, щоб ця інформація не потребувала регенерації. Це корисно для випадків, наприклад, коли ваша програма отримує дані через HTTP. Передаючи стан з сервера, це означає, що розробникам не потрібно робити другий HTTP-запит, як тільки програма передасть її клієнту. Документація для State Transfer має відбутися протягом наступних кількох тижнів.

Іншою зміною від команди Angular Universal є додавання Domino на платформер-сервер. Domino означає, що ми підтримуємо більше маніпуляцій DOM з коробки в контексті серверної сторони, покращуючи нашу підтримку сторонніх JS та компонентних бібліотек, які не відомі на стороні сервера.

Поліпшення компілятора

Ми вдосконалили Angular компілятор, щоб підтримувати поступову компіляцію. Це забезпечує швидке перебудову, особливо для виробничих збірок та збірок з AOT. Ми також додали функції для наших декораторів та дозволили поставити менші пакети, видаливши пробіл.

Перетворення TypeScript

Під капотом Angular компілятор тепер працює як перетворення TypeScript, що робить поступові перебудови значно швидше. TypeScript перетворення були новою функцією, представленою як частина TypeScript 2.3, що дозволяє нам зачепитись до стандартного контуру компіляції TypeScript.

Ви можете скористатись цим, запустивши ng serve прапорець AOT.

ng serve --aot

Ми рекомендуємо кожному спробувати це. Це стане типовим для майбутнього випуску CLI. Існують деякі відомі проблеми зі швидкістю з проектами з більш ніж тисячею компонентів. Ми хочемо бути впевненими, що проекти будь-якого розміру зазнають цих покращень.

Під час виконання інкрементного побудови AOT з https://angular.io, новий конпілятор компілятора зберігає 95% часу збирання (від більш ніж 40 секунд до менше 2 секунд на наших машинах розробки).

Нашою метою було зробити компіляцію AOT достатньо швидко, щоб розробники могли використовувати її для розробки, усунувши ті відмінності, які розробники іноді стикаються, коли вперше намагаються перейти до виробництва. Команда набрала свої 2-секундні інкрементні AOT перебудовувані цільові показники, і за замовчуванням вона буде перетворювати AOT у майбутній випуск CLI.

У рамках цього переходу на перетворення ми більше не потребуємо genDir і outDir змінилися: тепер ми завжди випромінюємо створені файли для пакетів в node_modules.

preserveWhitespaces

Історично вклади, нові рядки та пробіли у ваших шаблонах були точно відтворені та включені в вашу збірку компілятором. Тепер ви можете вибрати, чи зберегти пробіл, що йде від ваших компонентів та вашої програми.

Ви можете вказати це як частину декоратора кожного компонента, де на даний момент він за замовчуванням true.

@Component({
  templateUrl: 'about.component.html',
  preserveWhitespaces: false
}
export class AboutComponent {}

Або ви можете вказати його широке застосування у своєму tsconfig.json, де воно також за замовчуванням true.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Загалом, специфікації на рівні компоненту перевищують загальні специфікації. Надалі команда сподівається на дефолт, щоб за замовчуванням false економити місце для розробників. Не турбуйтеся про свої <pre> теги, вони розумно обробляються.

Дізнайтеся більше про preserveWhitespaces на нашому сайті docs.

Покращена підтримка декоратора

Тепер ми підтримуємо expression lowering в декоратор для лямбда і вартості useValue, useFactory і data в об’єкті літералах. Це дозволяє використовувати значення, які можна обчислити лише під час виконання в декораторах для виражених полів.

Тепер ви можете використовувати лямбда замість названої функції, тобто ви можете виконати код, не впливаючи на ваш d.ts або ваш загальнодоступний API.

Component({
  provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}

Ми також знизимо вирази в рамках useValue.

Component({
  provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]
})
export class MyClass {}

Internationalized Number, Date та Currency Pipes

Ми створили нові Number, Date та Currency Pipes, які підвищують стандартизацію через браузери та усувають потребу в i18n polyfills.

У Angular ми покладалися на браузер, щоб надавати форматування Number, Date та Currency Pipes за допомогою API i18n браузера. Це призвело до того, що більшість розробників потребували заповнення polyfills, що означало, що користувачі бачили в різних веб-переглядачах суперечливі результати, і ми отримали коментарі, які звичайні формати (наприклад, Currency Pipes) не відповідали очікуванням розробника.

У 5.0.0 ми оновили pipes, щоб використовувати нашу власну реалізацію, спираючись на CLDR, щоб забезпечити велику підтримку та конфігурацію мов для будь-яких локалей, які ви хочете підтримати. Ми підготували документ, який порівнює поведінку pipes між v4 та v5.

Якщо ви не готові до нових pipes, ви можете імпортувати, DeprecatedI18NPipesModule щоб отримати доступ до старої поведінки.

Дізнайтеся більше про зміни в наших pipes i18n в журналі змін.

Замініть ReflectiveInjector за допомогою StaticInjector

Для того, щоб видалити ще більше поліфліків, ми замінили ReflectiveInjector на StaticInjector. Цей інжектор більше не вимагає Reflect polyfill, зменшуючи розмір програми для більшості розробників.

Раніше

ReflectiveInjector.resolveAndCreate(providers);

Після

Injector.create(providers);

Покращення швидкості Zone

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

Щоб обійти Zone, завантажте вашу програму з “noop” як ваш ngZone.

platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );

Для повного прикладу, перегляньте приклад проекту ng-component-state.

exportAs

Ми додали підтримку для декількох імен для ваших компонентів / директив. Це може бути дуже корисним для того, щоб допомогти користувачам мігрувати без порушення змін. Виводячи директиву з декількома іменами, ви можете створювати нові імена в Angular microsyntax, не порушуючи існуючий код. Це було використано як частина проекту Angular Material при міграції префікса, а також може допомогти іншим авторам компонентів.

Приклад

@Component({
  moduleId: module.id,
  selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
  exportAs: 'matButton, matAnchor',
  .
  .
  .
}

HttpClient

У версії 4.3 ми поставили HttpClient @angular/common як менший, простий та потужний спосіб зробити веб-запити на Angular. Новий HttpClient отримав велику похвалу від розробників, тому ми зараз рекомендуємо HttpClient для всіх програм і припиняємо попередню @angular/http library.

Для поновлення HttpClient, вам необхідно замінити HttpModule з HttpClientModule від @angular/common/http кожного з ваших модулів, вводять послугу HttpClient і видаліть всі map(res => res.json()) виклики, які більше не потрібно.

CLI v1.5

Починаючи з v1.5 Angular CLI, ми додали підтримку для Angular v5.0.0 і за замовчуванням генеруємо v5 проекти.

За допомогою цього другорядного релізу ми за замовчуванням включили Оптимізатор збірки, тому розробники можуть скористатися меншими розшаруваннями.

Ми також оновлюємо спосіб, яким ми використовуємо .tsconfig файли для більш точного дотримання стандартів TypeScript. Раніше, коли ми виявили лінький завантажений маршрут, і ви вручну вказали список files або include у вашому списку tsconfig.json, ми автоматично додамо ці маршрути, але тепер ми дотримуємось специфікації TypeScript і далі виконуємо це. За замовчуванням CLI налаштовує TypeScript без files або include розділів, тому більшість розробників не будуть залежати від цього.

Angular Forms додає updateOn Blur / Submit

Тепер ви можете запускати перевірку та оцінку оновлень на blur або на submit, а не на кожній вхідній події.

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

Крім того, тепер ви можете вказати asyncValidators безпосередньо в об’єкті параметрів, а не вказувати його як третій параметр.

Шаблонні форми

до

<input name="firstName" ngModel>

після

<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">

або

<form [ngFormOptions]="{updateOn: 'submit'}">

Реактивні форми

до

new FormGroup(value);
new FormControl(value, [], [myValidator])

після

new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})

RxJS 5.5

Ми оновили наше використання RxJS до версії 5.5.2 або пізнішої версії. Цей нещодавній випуск RxJS повністю надає розробникам можливість уникнути побічних ефектів від попереднього механізму імпорту з новим способом використання RxJS під назвою “lettable operators“. Ці нові оператори усувають побічні ефекти та проблеми розбиття коду / дерева, які існували за допомогою попереднього методу імплементації операторів.

Замість

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);

Тепер ти можеш

import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
  map(user => user.name),
  filter(name => name),
);

Крім того, RxJS тепер розподіляє версію за допомогою модулів ECMAScript. Новий кутовий CLI буде запускати цю версію за замовчуванням, значно заощаджуючи розмір розшарування. Але якщо ви не використовуєте Angular CLI, ви все одно повинні вказувати на новий розповсюдження. Документацію можна знайти в розділі “Build and Treeshaking” документації операторів, що надають путівник.

Нові події життєвого циклу маршрутизаторів

Ми додали маршрутизаторам нові етапи життєвого циклу, що дозволяє розробникам відстежувати цикл маршрутизатора від початку роботи охоронців до завершення активації. Ці події можуть бути використані для таких речей, як показує обертання на певному outlet маршрутизатора, коли child оновлюється, або для вимірювання ефективності guards та / або resolvers.

Нові події (в послідовності) є GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd. Приклад використання цих подій для запуску / зупинки поворотника може виглядати наступним чином:

class MyComponent {
  constructor(public router: Router, spinner: Spinner) {
    router.events.subscribe(e => {
      if (e instanceof ChildActivationStart) {
        spinner.start(e.route);
      } else if (e instanceof ChildActivationEnd) {
        spinner.end(e.route);
      }
    });
  }
}

Як я можу оновити?

Ми створили керівництво по оновленню Angular, щоб допомогти вам проаналізувати цей процес і дізнатись про будь-які зміни, які ви хочете зробити у своєму коді перед початком процесу оновлення, інструкціями щодо оновлення додатка та інформацією про підготовку майбутніх версій Angular.

Ми видалили багато застарілих інтерфейсів API (як OpaqueToken) і випустили кілька нових застарілих API. Цей посібник допоможе вам проаналізувати зміни, які вам доведеться внести до вашої програми.

Відомі проблеми

https://github.com/angular/angular/issues/19840

Переклад статті “Version 5.0.0 of Angular Now Available“