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


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

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 24

      –19
      Кто то до сих пор использует это в новых проектах? :D
        +4
        А почему нельзя или плохо использовать ангуляр в новых проектах?
          –13
          Когда вы напишете хоть один проект на React или Vue или Svelte, вы поймете о чем я)
            +11
            Перешел в новых проектах с Vue на Angular и перевел несколько старых проектов. Поддержка typescript лучше, rxjs — очень мощная и удобная штука когда разберешься. Четкие гайды по структурированию проекта. Разобраться в Vue было значительно проще изначально, но на этом плюсы закончились.
            Я все еще очень жду Vue 3 и несомненно буду пробовать.
            +4
            Поделитесь знанием, ибо не всем понятны ваши заявления. Про Реакт, если что, в курсе.
              +2
              Аргументный аргумент…
                –5
                Я же говорю, все лишь навсего нужно написать проект на React или Vue и все станет вам понятно. Когда ты не пробовал альтернативы сам в реальном мире, всё, что кто-то говорит это просто пустые слова.
                  +1
                  100% подписываюсь )

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

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

              +4
              Я активно работал на React и Angular в проектах и могу сказать, что обе технологии по своему хороши. Также у меня есть опыт работы в крупных IT компаниях и наверное Вас это огорчит, но для больших проектов, очень часто выбирают Angular (особенно в связке с .net core) из-за четкой структуры кода, хорошо продуманной архитектуры, typescript и огромного числа встроенных библиотек.
                –3
                Да что вы говорите? Я вам открою секрет, хорошая архитектура !== какой либо фреймворк и библиотека. Хорошо продумана архитектура === грамотный и опытный разработчик и всё, язык и всё остальное тут роли никакой не играют. И вот ещё один секрет, React дружит с typescript, ну и последний секрет на сегодня, для реакта просто тонны всевозможных библиотек.
                  +4
                  Про архитектуру и структуру кода я говорю к тому, что все разработчики на Angular знают гайдлайн, что существенно упрощает ввод разработчиков в команду. Если Вы «грамотный и опытный разработчик», то это не значит, что вся ваша команда будет такой, а react позволяет писать как хочешь и что хочешь.
                  И вот ещё один секрет, React дружит с typescript

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

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

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

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

                      0

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

                      0

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

                    0

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

                    0
                    Каждый релиз как праздник :)
                      +1
                      Ого, уже 9-ая версия
                        –2

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

                          0
                          Если бы вы хоть раз переезжали с AngularJS на Angular — такого бы не произошло, посколько обновиться с 2 на 4 на порядок проще. А так сочувствую, но ССЗБ.
                        0

                        До сих пор жду, когда Ангуляр откажется от нг-модулей, и инжектить можно будет напрямую в компонент. Было бы удобнее держать в уме компонентное дерево приложения и забыть о модульном.


                        Может в 10-й версии будет. Очень надеюсь.

                          0
                          Можно начать со SCAM, это позволит строить приложение, держа в уме компонентное дерево, уже сейчас, а потом, когда инжект зависимостей прямо в компонент станет реальностью, можно будет легко отказаться от модулей.

                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                        Самое читаемое