Angular 9, что нового?

d150b55a82a67910d05b9f89b2dabbb6.png

Пока Stephen Fluin традиционно не выпустил новый релиз и статью про фичи нового Angular, я попытался собрать в кучу все и ответить на вопрос что нового?

Одна из самых крутых фич, которую мы ждали почти 2 года — Angular Ivy, и наконец то Angular 9 будет компилироваться с Ivy по умолчанию. Если вы хотите погрузится во внутренности Angular Ivy есть 2 видео с AngularConnect: про Compiler и Runtime.

Как и всегда с Angular CLI вы сможете проапгреиться довольно легко, подробный гайд: https://next.angular.io/guide/updating-to-version-9


Template type-checking

Добавится флаг strictTemplates дополнительно к fullTemplateTypeCheck, будет работать только в Ivy. В полном режиме будет:


  • проверка привязки компонентов и директив к @Input


  • при проверке будет чекать typescript«овый strictNullChecks


  • проверка типов копонентов и директив, включая generic


  • проверка шаблона в контексте выполнения, например внутри *ngFor


  • проверка типа событий $event в компонентах и директивах, также при биндинге анимации


  • проверка правильных типов к локальным ссылкам DOM элементов, например при document.createElement будет возвращать тег


Имея такую строгую проверку типов в шаблонах, иногда необходимо отключать эту проверку, поэтому придумали $any () при которой проверка не будет осуществлятся.

Пример: {{$any (person).addresss.street}}


@ContentChildren

ContentChild По умолчанию будет работать только с с прямыми дочерними элементами


    

Для этого нужно будет подрубать флаг descendants

@ContentChildren ('foo', {descendants: false}) foos: QueryList


DI

Все классы, которые используют Angular DI, должны иметь декоратор Angular, такой как @Directive() или @Injectable (ранее недекорированные классы были разрешены только в режиме AOT или если использовался через Inject). По умолчанию CLI должен их правильно проапгреидить.

До:

export class MyService {...}
export class MyOtherService {...}
export class MyThirdClass {...}
export class MyFourthClass {...}
export class MyFifthClass {...}

@[NgModule](https://next.angular.io/api/core/NgModule)({
   providers: [
     MyService,
     {provide: SOME_TOKEN, useClass: MyOtherService},

После:

@[Injectable](https://next.angular.io/api/core/Injectable)() 
export class MyService {...} 

@[Injectable](https://next.angular.io/api/core/Injectable)() 
export class MyOtherService {...}
export class MyThirdClass {...}
export class MyFourthClass {...}
export class MySixthClass {...}

До:

{provide: MyToken}

После:

{provide: MyToken, [useValue](https://next.angular.io/api/core/ValueSansProvider#useValue): undefined}


Input

Инпуты для директив (например, name в © Habrahabr.ru