Пока 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, будет удалено.
ModuleWithProviders without a generic
esm5 and fesm5 distribution in angular/* npm packages
Removals of deprecated APIs
DeprecatedI18NPipesModule
DeprecatedCurrencyPipe
DeprecatedDatePipe
DeprecatedDecimalPipe
DeprecatedPercentPipe
ngForm element selector
versionedFiles
И если и этого недостаточно, то немного еще тут есть.
Ну а выпуск 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!
MaZaAa
Кто то до сих пор использует это в новых проектах? :D
lehkap
А почему нельзя или плохо использовать ангуляр в новых проектах?
MaZaAa
Когда вы напишете хоть один проект на React или Vue или Svelte, вы поймете о чем я)
Desprit
Перешел в новых проектах с Vue на Angular и перевел несколько старых проектов. Поддержка typescript лучше, rxjs — очень мощная и удобная штука когда разберешься. Четкие гайды по структурированию проекта. Разобраться в Vue было значительно проще изначально, но на этом плюсы закончились.
Я все еще очень жду Vue 3 и несомненно буду пробовать.
jamak Автор
сохранил вас в гисты =)
gist.github.com/irustm/375a9db35be6273368ac16be9e844cfa
Zet_Roy
Как по мне ангуляр забагованый кусок дерьма.
fougasse
Поделитесь знанием, ибо не всем понятны ваши заявления. Про Реакт, если что, в курсе.
lehkap
Аргументный аргумент…
MaZaAa
Я же говорю, все лишь навсего нужно написать проект на React или Vue и все станет вам понятно. Когда ты не пробовал альтернативы сам в реальном мире, всё, что кто-то говорит это просто пустые слова.
mclander
100% подписываюсь )
Но мне ангуляр заходит больше реакта, а вуй, совсем не пошёл)
klerick
Писал) и за 5 лет работая в 3ех компаниях где реакт головного мозга, не увидел хотя бы одного проекта который написан на реакте хорошо) в итоге все превращается в огромный монолит в котором черт голову
сломает. Реакт хорошая библиотека, но в умелых руках, но из-за меньшего порога входа, большинство разработчиков которые пишут на нем понятие о архитекторе не имеют. Каждый инструмент хорош по своему. Но в большом проекте где много форм выбор в пользу ангуляра. Да ты будешь биться головой об стену из-за ограничения фреймворка но ты знаешь куда ты бьешься и где искать решение.
vladimirx
Я активно работал на React и Angular в проектах и могу сказать, что обе технологии по своему хороши. Также у меня есть опыт работы в крупных IT компаниях и наверное Вас это огорчит, но для больших проектов, очень часто выбирают Angular (особенно в связке с .net core) из-за четкой структуры кода, хорошо продуманной архитектуры, typescript и огромного числа встроенных библиотек.
MaZaAa
Да что вы говорите? Я вам открою секрет, хорошая архитектура !== какой либо фреймворк и библиотека. Хорошо продумана архитектура === грамотный и опытный разработчик и всё, язык и всё остальное тут роли никакой не играют. И вот ещё один секрет, React дружит с typescript, ну и последний секрет на сегодня, для реакта просто тонны всевозможных библиотек.
vladimirx
Про архитектуру и структуру кода я говорю к тому, что все разработчики на Angular знают гайдлайн, что существенно упрощает ввод разработчиков в команду. Если Вы «грамотный и опытный разработчик», то это не значит, что вся ваша команда будет такой, а react позволяет писать как хочешь и что хочешь.
С typescript дружит абсолютной любой код на JS, но тут речь не о дружбе, а том, что все написано на TS и все это дает свои плюсы.
Видимо вы упустили слово «Встроенных». На любой фреймворк найдется тонна библиотек, но мы говорим о тех, что созданы самой командой фреймворка. Тут плюсы в том, что это все таки фреймфорк, а не библиотека.
P.S. Я не знаю, что за личная неприязнь у Вас к Angular, но советую вам выдохнуть и просто принять, что он есть и им будут пользоваться, хотите ли вы этого или нет.
faiwer
уточню, ко всему что не React + MobX. сабж трактует их как серебряную пулю и старается популяризировать уже прямо на уровне флейм-тролля :)
HeTpe3B
Человек вам говорит, что на "большой проект" надо людей выбирать, а не Angular)
atomic1989
Вернр, не равно. Но React зоопарк библиотек от разных комьюнити. Любое обновление одной из библиотек может создать головную боль. А angular вычтупает как единое целое, теститруется в общей связке. В крупных проектах это предпочтительнее. Angular дает множество возможностей, которыми надо уметь работать. Это как машина на механике. Механика сложнее и нуднее в начале, но освоив до автоматизма, понимаешь всю прелесть. React хорош для мелких и средних проектов.
HeTpe3B
Судя по количеству минусов, действительно, не так уж и много)