19 декабря 2019

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

Angular


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


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


Как и всегда с Angular CLI вы сможете проапгреиться довольно легко, подробный гайд.


Template type-checking


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


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


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


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


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


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


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



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


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


@ContentChildren


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


<comp>
    <div #bar> <!-- new runtime -->
          <div #foo></div>   <!-- matches in old runtime -->
    </div>
</comp>

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


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


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({
   providers: [
     MyService,
     {provide: SOME_TOKEN, useClass: MyOtherService},

После:


@Injectable() 
export class MyService {...} 

@Injectable() 
export class MyOtherService {...}
export class MyThirdClass {...}
export class MyFourthClass {...}
export class MySixthClass {...}

До:


{provide: MyToken}

После:


{provide: MyToken, useValue: undefined}

Input


Инпуты для директив (например, name в <my-comp name = “”>) ​​теперь устанавливаются при создании view до change detection(ранее все они устанавливались во время change detection).


Еще немного интересного


Такие свойства, как host внутри @Component и @Directive, могут быть унаследованы (ранее наследовались только свойства с явными полями, такими как @HostBinding).


Поддержка HammerJS осуществляется через импорт HammerModule (ранее он всегда включался в рабочие пакеты независимо от того, использовало ли приложение HammerJS).


Если токен иньецируется с флагом @Host или @Self, то инжектор модуля этот токен не ищет (ранее токены, помеченные этими флагами, все равно искали бы на уровне модуля).


При доступе к нескольким локальным ссылкам в шаблоне с одним и тем же именем берется первый (ранее брался последний экземпляр).


Директивы, которые используются в экспортируемом модуле (но не экспортируются сами), экспортируются публично (ранее компилятор автоматически записывал приватный экспорт с алиасом, чтобы он мог использовать свои глобальные знания для разрешения конфликтов)


Внешние функции или внешние константы в метаданных декоратора статически не разрешимы (ранее вы могли импортировать константу или функцию из другого скомпилированного модуля, например из библиотеки, и использовать эту константу / функцию в своем определении @NgModule).


Прямые ссылки инпутов в директивах, доступные через локальные ссылки, больше не поддерживаются по умолчанию.


Если есть несвязанный атрибут класса и биндинг через [class], классы несвязанном атрибуте также будут добавлены (ранее биндинг через класс перезаписывала классы в несвязанном атрибуте).


Больше невозможно перезаписывать lifecycle hooks при помощи моков на экземплярах директив для тестирования (для этого измените lifecycle hooks на самой директиве).


Специальные injection tokens (такие как TemplateRef или ViewContainerRef) возвращают новый экземпляр всякий раз, когда их запрашивают (ранее экземпляры шарились, если они запрашивались с похожих нод). Это прежде всего влияет на тесты, которые проводят сравнение идентичности этих объектов.


Парсинг ICU происходит во время выполнения, поэтому разрешен только текст, теги HTML и текстовые биндинги (ранее директивы также разрешались внутри ICU выражений).


Deprecated


Тут представлены значительные изменения в API, а то что было уже под Deprecated, будет удалено.



Removals of deprecated APIs



И если и этого недостаточно, то немного еще тут есть.


Ну а выпуск Angular 9 ожидаем после рождественских каникул =):


FYI, I made the decision to hold the #Angular 9.0 release until next year so that all of us and you can take time off over the coming weeks. Happy Holidays & see you in 2020!


Ну и конечно подписывайтесь на канал в телеграмме @ngFanatic где будут публиковаться дальнейшие новости про Angular.

Теги:AngularAngular 9Angular releaseAngular CLI
Хабы: Angular
+16
17,6k 31
Комментарии 24
Лучшие публикации за сутки

Минуточку внимания

Разместить