Angular 9, что нового?19.12.2019 10:18

Пока 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}

Angular 9, что нового?19.12.2019 10:18

Template type-checking

@ContentChildren

DI

Input