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

Комментарии (21)


  1. MaZaAa
    19.12.2019 10:36
    -1

    Кто то до сих пор использует это в новых проектах? :D


    1. lehkap
      19.12.2019 11:36
      +1

      А почему нельзя или плохо использовать ангуляр в новых проектах?


      1. MaZaAa
        19.12.2019 11:45
        -3

        Когда вы напишете хоть один проект на React или Vue или Svelte, вы поймете о чем я)


        1. Desprit
          19.12.2019 11:49
          +3

          Перешел в новых проектах с Vue на Angular и перевел несколько старых проектов. Поддержка typescript лучше, rxjs — очень мощная и удобная штука когда разберешься. Четкие гайды по структурированию проекта. Разобраться в Vue было значительно проще изначально, но на этом плюсы закончились.
          Я все еще очень жду Vue 3 и несомненно буду пробовать.


          1. jamak Автор
            19.12.2019 13:02

            сохранил вас в гисты =)

            gist.github.com/irustm/375a9db35be6273368ac16be9e844cfa


            1. Zet_Roy
              19.12.2019 22:55

              Как по мне ангуляр забагованый кусок дерьма.


        1. fougasse
          19.12.2019 11:59
          +1

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


        1. lehkap
          19.12.2019 14:38

          Аргументный аргумент…


          1. MaZaAa
            19.12.2019 14:50

            Я же говорю, все лишь навсего нужно написать проект на React или Vue и все станет вам понятно. Когда ты не пробовал альтернативы сам в реальном мире, всё, что кто-то говорит это просто пустые слова.


            1. mclander
              19.12.2019 19:42

              100% подписываюсь )

              Но мне ангуляр заходит больше реакта, а вуй, совсем не пошёл)


        1. klerick
          20.12.2019 12:32

          Писал) и за 5 лет работая в 3ех компаниях где реакт головного мозга, не увидел хотя бы одного проекта который написан на реакте хорошо) в итоге все превращается в огромный монолит в котором черт голову
          сломает. Реакт хорошая библиотека, но в умелых руках, но из-за меньшего порога входа, большинство разработчиков которые пишут на нем понятие о архитекторе не имеют. Каждый инструмент хорош по своему. Но в большом проекте где много форм выбор в пользу ангуляра. Да ты будешь биться головой об стену из-за ограничения фреймворка но ты знаешь куда ты бьешься и где искать решение.


    1. vladimirx
      19.12.2019 18:30

      Я активно работал на React и Angular в проектах и могу сказать, что обе технологии по своему хороши. Также у меня есть опыт работы в крупных IT компаниях и наверное Вас это огорчит, но для больших проектов, очень часто выбирают Angular (особенно в связке с .net core) из-за четкой структуры кода, хорошо продуманной архитектуры, typescript и огромного числа встроенных библиотек.


      1. MaZaAa
        19.12.2019 19:26
        -1

        Да что вы говорите? Я вам открою секрет, хорошая архитектура !== какой либо фреймворк и библиотека. Хорошо продумана архитектура === грамотный и опытный разработчик и всё, язык и всё остальное тут роли никакой не играют. И вот ещё один секрет, React дружит с typescript, ну и последний секрет на сегодня, для реакта просто тонны всевозможных библиотек.


        1. vladimirx
          19.12.2019 21:23
          +1

          Про архитектуру и структуру кода я говорю к тому, что все разработчики на Angular знают гайдлайн, что существенно упрощает ввод разработчиков в команду. Если Вы «грамотный и опытный разработчик», то это не значит, что вся ваша команда будет такой, а react позволяет писать как хочешь и что хочешь.

          И вот ещё один секрет, React дружит с typescript

          С typescript дружит абсолютной любой код на JS, но тут речь не о дружбе, а том, что все написано на TS и все это дает свои плюсы.
          тонны всевозможных библиотек

          Видимо вы упустили слово «Встроенных». На любой фреймворк найдется тонна библиотек, но мы говорим о тех, что созданы самой командой фреймворка. Тут плюсы в том, что это все таки фреймфорк, а не библиотека.

          P.S. Я не знаю, что за личная неприязнь у Вас к Angular, но советую вам выдохнуть и просто принять, что он есть и им будут пользоваться, хотите ли вы этого или нет.


          1. faiwer
            20.12.2019 00:25

            Я не знаю, что за личная неприязнь у Вас к Angular

            уточню, ко всему что не React + MobX. сабж трактует их как серебряную пулю и старается популяризировать уже прямо на уровне флейм-тролля :)


          1. HeTpe3B
            20.12.2019 01:46

            Человек вам говорит, что на "большой проект" надо людей выбирать, а не Angular)


        1. atomic1989
          20.12.2019 12:34

          Вернр, не равно. Но React зоопарк библиотек от разных комьюнити. Любое обновление одной из библиотек может создать головную боль. А angular вычтупает как единое целое, теститруется в общей связке. В крупных проектах это предпочтительнее. Angular дает множество возможностей, которыми надо уметь работать. Это как машина на механике. Механика сложнее и нуднее в начале, но освоив до автоматизма, понимаешь всю прелесть. React хорош для мелких и средних проектов.


    1. HeTpe3B
      20.12.2019 01:50

      Судя по количеству минусов, действительно, не так уж и много)


  1. vladimirx
    19.12.2019 13:02

    Каждый релиз как праздник :)


  1. lowadka
    19.12.2019 21:37

    Ого, уже 9-ая версия


    1. HeTpe3B
      19.12.2019 22:41

      А мы до сих пор на 2ой :(