Ця публікація була спочатку опублікована мій сайт: https://dsebastien.net
У цій статті я розповім (майже) про все, що варто відзначити в цьому абсолютно новому випуску. Я також підкреслю, що змінилося навколо Angular, як і в моїх попередніх статтях про Кутова 11 та Кутова 10.
Якщо ви просто шукаєте вид з висоти пташиного польоту, то перевірте офіційне оголошення про випуск. Тут я копну набагато глибше в примітки до випуску.
Приєднайтеся до Ліги плюща…
Команда Angular працювала над плющ (новий конвеєр компіляції та візуалізації) з 2018 року. Його нарешті було випущено з Angular 8. З Angular 9 Ivy є стандартним для нових проектів, і екосистема повільно переходить до нього. З Angular 12, старий механізм перегляду тепер офіційно застарів. Його буде видалено в майбутньому випуску. Також не можна буде створювати нові програми за допомогою View Engine. Нарешті, Ivy тепер є типовим для нових бібліотечних проектів.
На даний момент автори бібліотек все ще можуть покладатися на View Engine завдяки ngcc
(компілятор сумісності Angular), але настав час для них оцінити, чи можуть вони перенести свої бібліотеки на Ivy чи ні. Кілька тижнів тому опублікував Мінко Гечев Стаття пояснити це детально. Також перегляньте пов’язані RFC.
Якщо ви не знали, ngcc
це невеликий процес, який запускається після створення проекту Angular або встановлення залежностей. Коли ви бачите повідомлення як Compiling ... : es2015 as esm2015
, його ngcc
виконує свою роботу. Що ngcc
компілює бібліотеки, які покладаються на View Engine, щоб Ivy могла їх використовувати.
Як і я, ви, мабуть, це помітили ngcc
виконання займає багато часу та дуже негативно впливає на досвід розробника. Ось чому для екосистеми Angular вкрай важливо якомога швидше перейти на Ivy. По-друге, поки більша частина екосистеми не перейде далі, команді Angular доведеться підтримувати View Engine, що проблематично з кількох причин. І останнє, але не менш важливе: бібліотеки, які покладаються на View Engine, не можуть залежати від бібліотек Ivy.
Автори бібліотек, ймовірно, не можуть перейти на Ivy надто швидко, але вони повинні чітко спонукати неохочих користувачів до оновлення. У будь-якому випадку, шлях вперед полягає в тому, щоб перенести всі речі на Ivy якнайшвидше
Є чудова стаття про Айві там.
До побачення, транспортир
У квітні команда Angular оголосила про плани припинити підтримку Транспортир наприкінці 2022.
Починаючи з Angular 12, Protractor не буде включено за замовчуванням у нові проекти. Натомість Angular CLI надасть варіанти використання інших рішень, наприклад Кипарис, WebdriverIOабо TestCafe. Це означає, що ng e2e
Команда має продовжувати підтримуватися в майбутньому.
Як пояснили в Оголошення, ще в 2013 році, коли було створено Protractor, веб-драйвер не був стандарт, і наскрізні (e2e) тести було складно писати, а підтримувати – кошмаром. Транспортир приніс інноваційне рішення шляхом обгортання selenium-webdriver, і надав спосіб керування потоком виконання.
Звичайно, з тих пір багато чого змінилося. Тепер ми маємо WebDriver
API, async
та await
(навіть вищого рівня await
, вау). Крім того, екосистема також еволюціонувала. Такі рішення Кипарис, Драматург, Ляльковий здобули велику (заслужену) популярність. Такі інструменти, як Cypress, наприклад, забезпечують набагато кращий досвід розробника, ніж Protractor, використовують сучасні стандарти та навіть підтримують міжбраузерне тестування (серед інших потужних можливостей). Ще одна перевага поточних де-факто інструментів тестування e2e полягає в тому, що вони не залежать від фреймворку, що дуже цінно.
Коротше кажучи, підтримувати Protractor не має особливого сенсу для команди Angular. Еволюція транспортира зараз вимагатиме надто багато зусиль і спричинить масу критичних змін. Ви можете знайти більше деталей у RFC, це цікаво читати.
Графік важливий для команд/проектів, які витратили багато часу та енергії на написання тестів e2e за допомогою Protractor. Команда Angular все ще зайнята оцінкою відгуків, зібраних через RFC, тому ми, ймовірно, дізнаємось більше пізніше цього року.
У будь-якому випадку; спробуйте Cypress, якщо ви ще не зробили цього, ви не розчаруєтеся! До речі, я постійно рекомендую всім почати користуватися Nrwl NX, чудове рішення, яке включає підтримку Angular, React, Next.js, Cypress та багато іншого
Нульове злиття
Angular 12 включає підтримку використання нульовий оператор злиття в шаблонах Angular. І це чудово! Цей оператор підтримується у TypeScript починаючи з версії 3.7.
Якщо ви не чули про цього оператора, дозвольте мені коротко пояснити. Ідея полягає в тому, щоб мати можливість визначити запасне значення, якщо щось є null
or undefined
. Ось приклад:
If foo
is null
or undefined
, То x
буде встановлено на true
(тобто резервне значення), і ми можемо встановити будь-яке значення.
Без цього чудово ??
оператора, ми повинні написати це замість цього:
let x = foo !== null && foo !== undefined ? foo : true;
Тепер, коли Angular також підтримує це, ми нарешті можемо писати такі вирази, як:
{{ age ?? calculateAge() }}
Замість старої та більш багатослівної альтернативи. ОКУРАТНО!
Ви можете дізнатися більше про цю зміну тут.
Ви можете знайти більше інформації про нульове об’єднання в Довідник з TypeScript а також на DND.
Підтримка TypeScript 4.2
Angular 12 представляє підтримку для TypeScript 4.2, що означає, що тепер ми можемо використовувати a тонна нових чудових можливостей мови. Крім того, підтримку TypeScript 4.0 і 4.1 було припинено.
Ось короткий опис того, що включає TS 4.2:
Інтелектуальне збереження псевдонімів типу: Очікувані типи відображаються редакторами коду замість необроблених типів, як це було раніше. Ви можете дізнатися більше про це тут.
Елементи переднього/середнього відпочинку в типах кортежів: тепер ми можемо включати залишкові елементи будь-де в кортеж (із кількома застереженнями). Це дуже круто для тих із нас, хто час від часу покладається на кортежі. Дізнайтеся більше про це тут.
Розуміння структури вашого проекту: TS 4.2 включає новий прапор званий --explainFiles
, який наказує TypeScript вивести інформацію про те, чому файл було включено у вашу програму. Це дуже корисно для усунення несправностей.
Покращення для невикликаних перевірок функцій: TypeScript тепер може виявляти більше випадків, коли функції не викликаються. Наприклад, коли пишеш foo
замість foo()
. Більш детальну інформацію та приклади можна знайти тут.
Деструктуровані змінні тепер можна явно позначити як невикористані: let [_first, second] = getValues();
, що чудово; більше немає помилок, коли noUnusedLocals
увімкнено!
Насправді є набагато більше, наприклад суворіші перевірки для in
оператора та кілька критичних змін, які можуть вплинути на вас. Тому обов’язково перевірте Примітки до випуску.
Підтримка Webpack 5
Angular 11 приніс нам експериментальна підтримка Webpack 5. З Angular 12 підтримка Webpack 5 тепер готова до виробництва. нічого!
Якщо ви не дивилися Webpack 5, ви будете вражені. Webpack 5 був випущений ще в жовтні 2020 року, тому наразі він досить стабільний. Webpack наразі знаходиться на версія 5.37 (видано кілька днів тому).
Ось коротке пояснення того, що змінилося з Webpack 5, і чому я так радий цьому 🤩
По-перше, як ви знаєте, Webpack є ключ частина головоломки Angular CLI, і вона відіграє велику роль для розміру комплекту, продуктивності збірки тощо.
По-друге, Webpack 5 є основним випуском не просто так. Він містить низку критичних змін, які пояснюють, чому оновлення Angular та gazillion утиліт/бібліотек в екосистемі зайняло деякий час.
У примітках до випуску команда Webpack вказала, що Webpack 5 фокусується на:
- Покращення продуктивності збірки за допомогою упиратися кешування
- Покращення довготривалого кешування за допомогою кращих алгоритмів і параметрів за замовчуванням
- Покращення розміру пакета за допомогою кращого Tree Shaking і генерації коду
- Покращення сумісності з веб-платформою
- Очищення внутрішніх конструкцій
- Представляємо критичні зміни (ха-ха), що дозволяє їм залишатися на версії 5 якомога довше
Найкрутішою особливістю Webpack 5 є його підтримка Module Federation, який забезпечує основи, необхідні для полегшення створення мікроінтерфейсів. Це трохи виходить за рамки цієї статті, але в одну мить об’єднання модулів дає змогу різним збіркам поводитися як величезний зв’язаний граф модулів, а також дозволяє нам імпортувати та використовувати модулі з віддалених збірок. Перевірити офіційна документація щоб дізнатися більше.
Серед основних змін у Webpack 5 відкинуто все, що раніше було застарілим (наприклад, NoEmitOnErrorsPlugin
, ModuleConcatenationPlugin
, NamedModulesPlugin
), так добре як IgnorePlugin
та BannerPlugin
.
Крім того, полізаповнення Node.js, які раніше були автоматично введені, було видалено; і це одна з найбільших змін у цьому випуску. Ці полізаповнення спочатку дозволяли Webpack використовувати модулі, створені для Node.js у браузері. Це було круто, але у нього був серйозний мінус: більші пачки. Крім того, ці полізаповнення були все менш корисними, оскільки існували або сумісні з браузером альтернативи бібліотек, або спеціальні дистрибутиви з підтримкою браузера. Починаючи з Webpack 5, оскільки ці полізаповнення більше не додаватимуться автоматично, ми можемо натрапити на деякі сюрпризи. Наприклад, у випадках, коли ми використовуємо модулі, створені для Node.js у браузері, не усвідомлюючи, що раніше він працював завдяки Webpack. Ви можете дізнатися більше про це тут.
Webpack 5 представив кращу підтримку довгострокового кешування. У робочому режимі він тепер включає нові алгоритми за замовчуванням:
chunkIds: "deterministic"
moduleIds: "deterministic"
mangleExports: "deterministic"
Як вказує значення, ці алгоритми призначають детерміновані ідентифікатори фрагментам і модулям і детерміновані імена експортам.
Webpack 5 здатний здійснювати струшування вкладеного дерева, відстежуючи доступ до вкладених властивостей експорту (ласкаво просимо до Матриці), що має ще більше покращити трясіння дерева. Також тепер можна аналізувати залежності між експортом та імпортом модуля. Також є покращення Струшування дерева CommonJS. І є тонна більше оптимізацій.
Webpack 5 також містить низку змін для покращення роботи розробників. Наприклад, є новий іменований алгоритм ідентифікатора фрагмента який увімкнено за замовчуванням у режимі розробки. Цей новий алгоритм дає фрагментам зрозумілі для людини назви. The target
власність також була значною поліпшений.
Чесно кажучи, мені тут не вистачає місця, щоб описати все нове з Webpack 5, тамс просто шлях занадто багато. Тому я тут зупинюся
Якщо ви використовуєте Webpack лише опосередковано через Angular CLI, то більша частина цього має бути «прозорою» для вас. Але якщо ви використовуєте a спеціальна збірка Webpack у вашому проекті, то вам, ймовірно, варто поглянути на міграційний путівник.
Нарешті, якщо вам цікаво, що буде далі з Webpack, то перегляньте дорожня карта на 2021 рік і звичайно останні примітки до випуску.
Підтримка IE11 застаріла
Як би сумно це не звучало (кого я жартую? 😂), Angular 12 припиняє підтримку IE11. Internet Explorer мертвий для більшості з нас, але, на жаль, багато організацій все ще використовують його у виробництві. Таким чином, підтримка IE 11 буде припинена Angular 13, що означає, що цим організаціям дійсно потрібно почати відходити від IE (що в будь-якому випадку добре). Більше ніяких виправдань!
Коли підтримка IE припиниться, Angular стане меншим, швидшим і, отже, кращим для всіх нас. Крім того, щойно тягар підтримки зворотної сумісності із застарілими браузерами зникне (IE11 є останнім із них!), тоді Angular зможе використовувати сучасні API (наприклад, Змінні CSS, Перехрестя Спостерігач, Сітка CSS, Проксі, Веб-анімація та більше).
Я справді не можу дочекатися, коли підтримка IE зникне!
Строгий за замовчуванням
ТАК ТАК ТАК 🤩. Станом на Angular 12 строгий режим Angular за замовчуванням увімкнено в CLI. І це чудово.
Як ви знаєте, я великий шанувальник строгого режиму TypeScript, а також строгого режиму Angular. Якщо ви хочете знати більше, тоді перевірте стаття, яку я написав минулого року і Мінко Гечева стаття, що пояснює зміни.
Виробнича збірка за замовчуванням
До цих пір, керуючи ng build
Команда створила збірку розробки. Станом на Angular 12, ng build
тепер за замовчуванням буде використано робочу збірку.
Сподіваємось, це допоможе деяким командам уникнути помилки створення та розгортання збірок для розробки у виробничих середовищах. Хоча я боюся, що команди, які припустилися цієї помилки, все одно матимуть інші проблеми
Підтримка Sass для вбудованих стилів
Angular підтримує Sass дуже давно, але поки що ми могли використовувати Sass лише у зовнішніх таблицях стилів. З Angular 12 тепер можна використовувати Sass разом із вбудованими стилями компонентів (тобто в межах styles
майно).
Це потрібно ввімкнути, встановивши новий inlineStyleLanguage
майно до true
in angular.json
.
Підтримка попутного вітру
Вітер тепер офіційно підтримується Angular. Насправді підтримку було введено в Angular CLI у v11.2.
Попутний вітер є зайнятий захопленням світу, особливо тепер, коли він має a rad JIT-компілятор, і чудово мати вбудовану підтримку для цього в Angular.
Раніше потрібно було додати Tailwind до проекту Angular налаштування збірки Webpack. більше ні! Тепер додати Tailwind так само просто, як встановити пакет, створити tailwind.config.js
файл, використовуючи npx tailwindcss init
і ввімкніть Режим JIT Tailwind.
Покращення Http
Angular 12 представляє низку покращень щодо підтримки HTTP.
Метадані для запитів і перехоплювачів
По-перше, HttpClient
тепер можна використовувати для зберігання та отримання спеціальних метаданих для запитів. Це особливо корисно для перехоплювачів HTTP. Цю можливість можна використовувати через новий HttpContext
.
Раніше було складно надати контекст перехоплювачам, але тепер це стане набагато простіше. Тепер різні методи HTTP, які надає HttpClient
включити новий context: HttpContext
параметр, який ми можемо використовувати для передачі на карті.
Нетанел Базал написав про це статтю, тому перевірте, якщо хочете дізнатися більше.
appendAll на HttpParams
Команда HttpParams
тепер у класі новий appendAll
метод, який можна використовувати для легкого додавання набору параметрів одночасно:
appendAll(params: {[param: string]: string|string[]}): HttpParams
Тепер параметри можна передавати як числа та логічні значення
Раніше числа та логічні значення не можна було безпосередньо використовувати як параметри HTTP. Нам довелося перетворити їх на рядки. більше ні!
HttpStatusCode
Angular представив власний список зрозумілих людині імен для кодів статусу HTTP у формі const enum.
Раніше нам доводилося запроваджувати власне рішення, якщо ми хотіли мати зрозумілі людині імена. Завдяки цій новій функції ми тепер можемо замість цього використовувати HttpStatusCode
.
Наприклад:
if (response.status === HttpStatusCode.Ok) { ...
}
Для тих, хто використовує TypeScript як у бек-енді, так і в інтерфейсі, це не надто корисно (оскільки ми, мабуть, усі вже маємо власну абстракцію), але якщо ваш проект використовує лише TypeScript/Angular у інтерфейсі, тоді це приємне покращення.
XhrFactory
Команда XhrFactory
Клас переміщено до іншого пакета. Зараз його викриває angular/common
замість angular/common/http
.
Зауважте, що міграція була включена в оновлення, тому ви навіть не помітите, якщо запустите ng update
Зміни маршрутизатора
Маршрутизатор Angular дещо змінився в Angular 12.
По-перше, routerLinkActiveOptions
директиву було вдосконалено. Тепер можна вказати, чи потрібна нам точна відповідність для різних частин URL-адреси, щоб додати клас CSS до посилання.
Раніше ми могли лише вимагати точної відповідності (чи ні) для всієї URL-адреси:
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ exact: true }"
> foo
</a>
Тепер замість цього ми можемо надати детальні правила відповідності для шляхів, параметрів запиту, параметрів матриці та фрагментів.
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ paths: 'exact', queryParams: 'subset', matrixParams: 'ignored', fragment: 'ignored' }"
> foo
</a>
Підтримувані значення: exact
, ignored
та subset
, який можна використовувати для queryParams
та matrixParams
. Для шляхів ви можете або пройти exact
or subset
та exact
or ignored
для fragment
.
Зауважте, що isActive
метод маршрутизатора також приймає ці нові параметри.
фрагмент має значення null
Досі, ActivatedRouteSnapshot.fragment
не було нульовим. З Angular 12 це змінилося. Але не хвилюйтеся надто; ng update
тебе закрили.
Форми
Більше контролю над випромінюваними подіями
Команда emitEvent
опцію додано до різних методів FormGroup
та FormArray
. Завдяки цій зміні тепер можна буде контролювати, чи потрібно видавати події чи ні в більшій кількості випадків.
Наприклад, раніше, коли елемент керування було видалено за допомогою removeControl
метод FormGroup
, то подія завжди видавалась. Завдяки цій зміні ми тепер зможемо уникнути таких проблем.
Команда emitEvent
опцію додано до наступних методів FormGroup
:
addControl
removeControl
setControl
І до наступних способів FormArray
:
push
insert
removeAt
setControl
clear
підтримка валідаторів min і max для форм, керованих шаблонами
Команда min
та max
валідатори Angular тепер можна використовувати з формами, керованими шаблонами:
<input [(ngModel)]="foo.bar" [min]="min" [max]="42" />
Зауважте, що це критична зміна, оскільки раніше вони ігнорувалися.
i18n
Система i18n Angular змінилася з цим випуском.
Як зазначено в дописі в блозі оголошення, наразі використовується кілька застарілих форматів ідентифікаторів повідомлень. Вони є крихкими, і можуть виникати проблеми через пробіли, шаблони форматування та вирази ICU.
Angular 12 представляє новий канонічний формат ідентифікатора повідомлення (тобто один формат, який керуватиме всіма). Цей формат більш стійкий і інтуїтивно зрозумілий.
Цей формат зменшить непотрібне визнання перекладу недійсним і пов’язану з ним вартість повторного перекладу в програмах, де переклади не збігаються, наприклад, через зміни пробілів.
Починаючи з версії 11, нові проекти автоматично налаштовуються на використання нових ідентифікаторів повідомлень, і тепер є інструментарій для перенесення існуючих проектів із наявними перекладами. Якщо ви хвилюєтеся, ви можете скористатися localize-migrate
інструмент для перенесення ваших ідентифікаторів повідомлень:
ng extract-i18n --format=legacy-migrate
npx localize-migrate --files=*.xlf --map-file=messages.json
Ви можете знайти більше інформації тут.
підвищення продуктивності
У цьому випуску є низка покращень продуктивності. Найочевидніший з них приходить разом із оновленням до Webpack 5, але є й інші:
Кілька невикористаних методів було видалено з DomAdapter
. Це круто, тому що його методи не можна похитувати деревом і були включені в усі додатки Angular, як пояснюється в відповідний PR.
Angular тепер генерує менше коду для безпечного доступу до власності; наприклад, для шаблонних виразів, таких як a?.b
і нещодавно підтримуване нульове об’єднання: a ?? b
.
Компілятор Angular тепер підтримує інкрементну компіляцію навіть за наявності перенаправлених вихідних файлів. Раніше роботу з попередньої компіляції не можна було повторно використовувати, коли TypeScript видаляв дублікати вихідних файлів. Ви можете прочитати більше про це тут.
Компілятор Angular тепер кешує шлях файлової системи вихідних файлів. Раніше в нього неодноразово дзвонили fs.resolve()
, що займає багато часу.
Команда getDirectives
функція була покращена. Разом із цією зміною, ng
простір імен також було розширено, щоб включити новий getDirectiveMetadata
утиліта
І там є трошки більше.
ng покращення API
Команда ng
API налагодження який ми можемо використовувати з інструментів розробника браузера, було вдосконалено за допомогою Angular 12.
Є нова функція під назвою getDirectiveMetadata
, який можна використовувати для отримання інформації про компоненти та директиви. Я не думаю, що він нам знадобиться часто, але майбутні вдосконалення інструментів для розробників, швидше за все, залежатимуть від цього. Ви можете дізнатися більше тут.
Викликається нова функція профайлера esetProfiler
також реалізовано, і він також доступний у режимі виробництва. Цю нову функцію можна викликати в кількох сценаріях. Наприклад, його можна використовувати для відстеження тривалості створення шаблону, оновлення шаблону, обробки перехоплювачів життєвого циклу тощо. Знову ж таки, цей API використовуватимуть майбутні інструменти розробників, надаючи нам набагато більше глибокої інформації про те, як наші програми працюють на час виконання.
На даний момент це все ще експериментально, але я думаю, ми почуємо про це пізніше. Мені цікаво дізнатися, чи/коли такі інструменти, як Sentry, інтегруватимуть підтримку для збору такого роду інформації, щоб надати нам корисні інформаційні панелі продуктивності.
Через кілька днів після випуску Angular 12 команда Angular має оголошений наявність абсолютно нових Angular Dev Tools для Google Chrome. Ви можете їх завантажити тут.
Використовуючи це абсолютно нове розширення для браузера, ви можете легко перевіряти свої програми Angular під час розробки. Він підтримує:
- Візуалізація структури програми (тобто перевірка дерева компонентів)
- Вивчення та редагування компонентів
- Профілювання виступів
Використовуючи вбудований профайлер, ми можемо записувати події виявлення змін і переглядати їх, коли вони відбуваються. Для кожного циклу виявлення змін ми можемо подивитися, скільки часу він зайняв, які компоненти займали найдовше, чи викликав цей цикл падіння кадрів.
Angular раніше мав напівофіційні Dev Tools через Авгурі (які є основою нових інструментів!), але вони були несумісні з Ivy. Тож це чудова новина для спільноти Angular!
І більше…
Там в тонну більше незначні зміни в цьому випуску. Ось короткий огляд.
APP_INITIALIZER тепер підтримує Observables
Досі було неможливо використовувати Observables APP_INITIALIZER
. Починаючи з Angular 12, ми тепер можемо це робити, що дозволить отримати чистіший код!
Якщо ви ще не знали про цю функцію Angular, APP_INITIALIZER
is жетон які ми можемо використовувати для визначення функцій, які повинні виконуватися під час ініціалізації програми. Якщо ця функція асинхронна, повернення a Promise
або Observable
(новий :p), тоді Angular чекає завершення, перш ніж запускати програму.
Ця зміна більш ніж бажана, оскільки це означає, що ми можемо писати ще більше коду за допомогою RxJS замість того, щоб «повертатись» до Promise
API.
Ви можете прочитати більше про це тут.
Контроль виконання анімацій
Раніше єдиним способом вимкнути анімацію було надання NoopAnimationsModule
. Починаючи з Angular 12, тепер можна вимкнути анімацію на основі інформації про час виконання за допомогою BrowserAnimationModule.withConfig
метод і передача його disableAnimations
логічне властивість.
Новий метод historyGo у службі визначення місцезнаходження
Команда LocationService
Angular тепер включає a historyGo
метод, який можна використовувати для переходу до певної сторінки в історії сеансу, визначеної її відносною позицією щодо поточної сторінки. Цей спосіб відповідає нативному window.history.go
метод. Перевірте MDN для деяких прикладів.
Покращення мовного сервісу
Сервіс мови, який надає IDE всю корисну інформацію про код Angular, також покращився з цим випуском.
У Angular 12 мовна служба ввімкнена за замовчуванням (раніше нам потрібно було ввімкнути її).
Починаючи з Angular 12, він також визначатиме if сувора перевірка типу шаблону не ввімкнено, і порадить вам увімкнути їх.
Сервіс мови тепер також включає можливості відстеження продуктивності, які можна використовувати для відстеження продуктивності. Це можна ввімкнути у VSCode, як пояснено тут (хоча це досить низький рівень).
Якщо ви ще не знаєте про мовний сервіс, перевірте офіційні документи, або чудовий допис у блозі, написаний Загін ніндзяабо цього вступ відео.
Вимкніть правила lint безпосередньо з шаблонів HTML
Компілятор шаблонів Angular тепер відстежує коментарі HTML.
Раніше було неможливо вимкнути правила лінтера з шаблонів HTML, оскільки компілятор шаблонів Angular ігнорував коментарі. Обхідним шляхом було вимкнути ці правила для всього шаблону з контролера компонента. Завдяки цій зміні тепер це можна зробити точніше за допомогою шаблону:
<!-- eslint-disable-next-line @angular-eslint/template/no-any -->
<span>{{ $any(foo).bar }}</span>
Ура, чистіший код!
DatePipe тепер підтримує стандартний автономний день тижня ICU
Раніше це не було можливо щоб відформатувати дату в автономний день тижня за допомогою DatePipe.
Завдяки цій зміні тепер підтримується фінське форматування дати, і я впевнений, що це чудова новина для частини спільноти Angular 😉
Підтримка forwardRef у наданих полях Injectable декораторів
Тепер можна використовувати forwardRef
в providedIn
поле @Injectable
декоратор.
Новий хук transformResource в інтерфейсі ResourceHost
A transformResource
метод додано до ResourceHost
інтерфейс. Завдяки цьому тепер інструменти можуть виконувати такі дії, як запровадження підтримки препроцесора для вбудованих стилів. Саме це забезпечує нову підтримку SASS із вбудованими стилями.
Ви можете дізнатися більше про це тут та тут.
Можливість створення власних розеток маршрутизатора
Дотепер створення користувацьких розеток маршрутизаторів було можливим, але вимагало пройти через певні труднощі (наприклад, реєструвати користувацькі розетки в ChildrenOutletContexts
).
Angular 12 забезпечує a чистіша підтримка розеток настроюваних маршрутизаторів.
Виправлення помилок
Як завжди, у цей випуск включено безліч виправлень помилок.
Ось копія приміток до випуску:
- анімація: забезпечити послідовне впорядкування простору імен переходу (# 19854) (01cc995)
- анімація: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (e918250)
- анімація: очищення елементів DOM, коли видалено кореневий перегляд (# 41059) (c49b280)
- анімація: дозволити анімацію для елементів у тіньовому DOM (# 40134) (dad42c8), закривається # 25672
- анімація: очищення елементів DOM, коли видалено кореневий перегляд (# 41001) (a31da48)
- базел: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (8503246)
- базел: оновити інструменти збірки для останніх змін у rules_nodejs (# 40710) (696f7bc)
- базел: оновити інтеграційний тест для використання rules_nodejs@3.1.0 (# 40710) (34of89a)
- базел: оновити приведення типів для використання JSON.parse (# 40710) (2c90391)
- жим лежачи: оновити приведення типів для використання JSON.parse (# 40710) (e721a5d)
- загальні: додати правильний ContentType для логічних значень із тілом запиту HttpClient(# 38924) (# 41885) (922a602)
- загальні: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (f2b6fd8)
- загальні: скролер вікна перегляду не знаходить елементи в тіні DOM (# 41644) (c0f5ba3), закривається # 41470
- загальні: тимчасово реекспортувати та вилучити з експлуатації
XhrFactory
(# 41393) (7dfa446) - загальні: місце очищення змінює слухачів, коли кореневий перегляд видалено (# 40867) (38524c4), закривається # 31546
- загальні: дозволити число або логічне значення як параметри http (# 40663) (91cdc11), закривається # 23856
- загальні: уникайте зміни об’єкта контексту в NgTemplateOutlet (# 40360) (d3705b3), закривається # 24515
- компілятор: зберігати правила @сторінки в інкапсульованих стилях (# 41915) (3e365ba), закривається # 26269
- компілятор: знімати селектори з областю видимості з
@font-face
правила (# 41815) (2a11cda), закривається # 41751 - компілятор: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (bae8126)
- компілятор: нелітеральні вбудовані шаблони неправильно оброблені під час часткової компіляції (# 41583) (ab257b3)
- компілятор: не генерує інструкції з оновлення для ng-template всередині альтернативних просторів імен (# 41669) (2bcbbda), закривається # 41308
- компілятор: уникайте розбору EmptyExpr із зворотним проміжком (# 41581) (e1a2930)
- компілятор: обробляти спеціальні властивості CSS з урахуванням регістру (# 41380) (e112e32), закривається # 41364
- компілятор: включити використані компоненти під час JIT-компіляції часткового оголошення компонента (# 41353) (ff9470b), закривається # 41104 # 41318
- компілятор: підтримка кількох
:host-context()
селектори (# 40494) (07b7af3), закривається # 19199 - компілятор: оновити приведення типів для використання JSON.parse (# 40710) (f728490)
- компілятор-cli: використовувати ” для URL-адреси вихідної карти непрямих шаблонів (# 41973) (7a4d980), закривається # 40854
- компілятор-cli: розкрити компонувальник як плагін Babel (# 41918) (8fdac8f)
- компілятор-cli: віддавайте перевагу експорту без накладень у еталонних джерелах (# 41866) (75bb931), закривається # 41443 # 41277
- компілятор-cli: дозволити компонувальнику обробляти зменшені логічні значення (# 41747) (1fb6724), закривається # 41655
- компілятор-cli: відповідати частковим оголошенням, індексованим рядком (# 41747) (f885750), закривається # 41655
- компілятор-cli: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (5b463f4)
- компілятор-cli: типи літералів автозаповнення в шаблонах. (# 41456) (# 41645) (8b2b5ef)
- компілятор-cli: не допускати помилок із попереднім препроцесуванням, якщо компонент не має вбудованих стилів (# 41602) (a5fe8b9)
- компілятор-cli: забезпечити відстеження компілятора
ts.Program
правильно (# 41291) (deacc74) - компілятор-cli: запобігти видаленню імпорту за замовчуванням у поетапних повторних компіляціях (# 41557) (7f16515), закривається # 41377
- компілятор-cli: рішення
rootDirs
до абсолютного (# 41359) (3e0fda9), закривається # 36290 - компілятор-cli: додавати
useInlining
можливість ввести перевірку конфігурації (# 41043) (09aefd2), закривається # 40963 - компілятор-cli:
readConfiguration
існуючі параметри повинні перевизначати параметри в tsconfig (# 40694) (b7c4d07) - компілятор-cli: продовжити
angularCompilerOptions
у tsconfig з вузла (# 40694) (5eb1954), закривається # 36715 - компілятор-cli: оновити тести інтеграції ngcc для останніх змін у rules_nodejs (# 40710) (d7f5755)
- компілятор-cli: оновити приведення типів для використання JSON.parse (# 40710) (b75d7cb)
- серцевина: не зберігайте динамічно скомпільовані компоненти та модулі (# 42003) (1449c5c), закривається # 19997
- серцевина: викликати профайлер навколо хуків життєвого циклу ngOnDestroy (# 41969) (e9ddc57)
- серцевина: AsyncPipe тепер сумісний із RxJS 7 (# 41590) (9759 рік до нашої ери)
- серцевина: обробляти кілька атрибутів i18n за допомогою прив'язок виразів (# 41882) (73c6c64), закривається # 41869
- серцевина: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (f9c1f08)
- серцевина: виявити синтезовані конструктори, які були знижені за допомогою TS 4.2 (# 41305) (274dc15), закривається # 41298
- серцевина: перемикач
emitDistinctChangesOnlyDefaultValue
до правди (# 41121) (7096246) - серцевина: видалити дубльовану константу EMPTY_OBJ (# 41066) (bf158e7)
- серцевина: видалити дубльовану константу EMPTY_ARRAY (# 40991) (e12d9de)
- серцевина: дозволити оновлення контексту EmbeddedViewRef (# 40360) (a3e1719), закривається # 24515
- серцевина: зробити DefaultIterableDiffer зберегти порядок дублікатів (# 23941) (a826926), закривається # 23815
- серцевина: Параметри об’єднання NgZone мають запускатися на Stable правильно (# 40540) (22f9e45)
- елементи: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (4f5d094)
- елементи: оновити приведення типів для використання JSON.parse (# 40710) (efd4149)
- форми: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (dc975ba)
- HTTP: виконати запит після тайм-ауту (# 39807) (61a0b6d), закривається # 26453
- HTTP: видавати помилку під час події переривання XMLHttpRequest (# 40767) (3897265), закривається # 22324
- мовна служба: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (9b6198c)
- мовна служба: використовувати версії сценаріїв для інкрементних компіляцій (# 41475) (78236bf)
- мовна служба: Забезпечуйте лише завершення властивості Angular у шаблонах (# 41278) (0226a11)
- мовна служба: Додайте параметр плагіна, щоб примусово використовувати strictTemplates (# 41062) (e9e7c33)
- мовна служба: використовувати єдину точку входу для Ivy та View Engine (# 40967) (e986a97)
- локалізувати: помилка релаксації до попередження про відсутність цілі (# 41944) (35ceed2), закривається # 21690
- локалізувати: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (658ed1f)
- локалізувати: оновити приведення типів для використання JSON.parse (# 40710) (4b469c9)
- ngcc: виявити синтезовані конструктори, які були знижені за допомогою TS 4.2 (# 41305) (8d3da56), закривається # 41298
- платформа-браузер: запобігання витоку пам'яті вузлів стилю, якщо використовується тіньова інкапсуляція DOM (# 42005) (d555555), закривається # 36655
- платформа-браузер: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (ea05cfd)
- платформа-браузер: конфігурувати
XhrFactory
to useBrowserXhr
(# 41313) (e0028e5), закривається # 41311 - платформа-браузер: оновити приведення типів для використання JSON.parse (# 40710) (7ecfd2d)
- динамічна платформа-браузер: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (bc45029)
- платформа-сервер: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (4b9d4fa)
- маршрутизатор: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (0067ред)
- маршрутизатор: Отримувати збережений маршрут лише тоді, коли стратегія повторного використання вказує на його повторне підключення (# 30263) (a4ff071), закривається # 23162
- маршрутизатор: рекурсивно злити порожні збіги шляху (# 41584) (1179dc8), закривається # 41481
- маршрутизатор: фрагмент може бути нульовим (# 37336) (b555160), закривається # 23894 # 34197
- маршрутизатор: оновити приведення типів для використання JSON.parse (# 40710) (350дада)
- обслуговуючий працівник: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (6b823d7)
- обслуговуючий працівник: оновити приведення типів для використання JSON.parse (# 40710) (4f7ff96)
- оновлення: зберігати $interval.flush, коли використовується ngMocks (# 30229) (87dc851)
- оновлення: оновити підтримуваний діапазон версій вузла, щоб включити лише версії LTS (# 41822) (10c4523)
До речі, ви це помітили AsyncPipe
було виправлено Беном Лешем бути сумісним як з RxJS 6, так і з 7? Як це круто?
Ломальні зміни
Як завжди, у цьому випуску є ряд критичних змін.
As офіційні релізи відзначає досить чіткі, я просто скопіюю/вставлю їх тут:
- Зменшені пакети UMD більше не входять до розповсюджених пакетів NPM.
- анімації: елементи DOM тепер правильно видаляються, коли видаляється кореневий перегляд. Якщо ви використовуєте SSR і використовуєте HTML програми для візуалізації, вам потрібно буде переконатися, що ви зберегли HTML у змінній перед видаленням програми. Також можливо, що тести можуть випадково покладатися на стару поведінку, намагаючись знайти елемент, який не було видалено в попередньому тесті. Якщо це так, невдалі тести слід оновити, щоб переконатися, що вони мають належний код налаштування, який ініціалізує елементи, на які вони покладаються
- загальний: Методика в
PlatformLocation
класу, а самеonPopState
таonHashChange
, звикли повертатисяvoid
. Тепер ці методи повертають функції, які можна викликати для видалення обробників подій - поширені: Методи в
HttpParams
клас тепер прийнятиstring | number | boolean
замістьstring
для значення параметра. Якщо ви розширили цей клас у своїй програмі, вам доведеться оновити підписи ваших методів, щоб відобразити ці зміни - компілятор-cli: пов’язані бібліотеки більше не генерують застарілі ідентифікатори повідомлень i18n. Будь-яка подальша програма, яка забезпечує переклади для цих повідомлень, повинна буде перенести свої ідентифікатори повідомлень за допомогою
localize-migrate
інструмент командного рядка - ядро: Angular більше не підтримує node v10, тому, якщо ви все ще використовуєте його для свого середовища розробки, настав час оновити!
- ядро: Раніше
ng.getDirectives
функція видавала помилку, якщо певний вузол DOM не мав контексту Angular, пов’язаного з ним (наприклад, якщо функція була викликана для елемента DOM поза програмою Angular). Така поведінка була несумісною з іншими утилітами для налагодженняng
простір імен, який обробив цю ситуацію без створення винятку. Тепер телефонуюng.getDirectives
функція для таких вузлів DOM призведе до порожнього масиву, що повертається з цього ядра функції: Перемикання за замовчуваннямemitDistinctChangesOnlyDefaultValue
що змінює типову поведінку та може призвести до збою деяких програм, які покладаються на неправильну поведінку
emitDistinctChangesOnly
прапор також застарів і буде видалено в наступному основному випуску
Попередня реалізація викликала зміни QueryList.changes.subscribe
щоразу, коли QueryList
було перераховано. Це призвело до штучно великої кількості сповіщень про зміни, оскільки, можливо, повторне обчислення QueryList
призводить до того самого списку. Коли QueryList
gets recomputed — це деталь реалізації, і вона не повинна визначати, як часто має запускатися подія зміни.
На жаль, повне виправлення поведінки призвело до збою багатьох існуючих програм. З цієї причини Angular вважає це виправлення несправним і впровадив позначку @ContentChildren
та @ViewChildren
, що контролює поведінку.
export class QueryCompWithStrictChangeEmitParent { @ContentChildren('foo', { // This option is the new default with this change. emitDistinctChangesOnly: true, }) foos!: QueryList<any>;
}
Для зворотної сумісності до v12emitDistinctChangesOnlyDefaultValue
було встановлено на false
. Ця зміна
змінює значення за умовчанням на true
.
- серцевина: Тип
APP_INITIALIZER
маркер було змінено, щоб точніше відображати типи повертаних значень, які обробляються Angular. Раніше кожен зворотній виклик ініціалізатора вводився для поверненняany
, це заразPromise<unknown> | Observable<unknown> | void
. У малоймовірному випадку, якщо ваша програма використовуєInjector.get
orTestBed.inject
API для введенняAPP_INITIALIZER
токен, вам може знадобитися оновити код, щоб врахувати більш суворий тип.
Крім того, TypeScript може повідомити про помилку TS2742, якщо APP_INITIALIZER
маркер використовується у виразі, для якого його передбачуваний тип має бути переданий у файл .d.ts. Щоб вирішити цю проблему, необхідна явна анотація типу, яка зазвичай і є Provider
or Provider[]
.
-
серцевина: Мінімум підтримується
zone.js
версія є0.11.4
. Таким чином, це означає, що якщо ви використовуєте старішу версію, настав час оновити zone.js у вашому проекті! -
форми: Команда
emitEvent
опцію було додано до наступногоFormArray
таFormGroup
методи: -
FormGroup.addControl
-
FormGroup.removeControl
-
FormGroup.setControl
-
FormArray.push
-
FormArray.insert
-
FormArray.removeAt
-
FormArray.setControl
-
FormArray.clear
Якщо ваша програма має спеціальні класи, які розширюються FormArray
or FormGroup
класів і перевизначати
згаданих вище методів, вам може знадобитися оновити свою реалізацію, щоб застосувати нові параметри
обліковий запис і переконайтеся, що перевизначення сумісні з точки зору типів.
- форми: Попередньо
min
таmax
атрибути, визначені на<input type="number">
були проігноровані модулем форм. Тепер наявність цих атрибутів буде
запускати логіку перевірки min/max (у випадкуformControl
,formControlName
orngModel
директиви також присутні на заданому вході) і
це відображатиме відповідний статус керування формою. - платформа-браузер:
XhrFactory
було переміщено з@angular/common/http
до@angular/common
.
Перед тим як
import { XhrFactory } from '@angular/common/http';
після
import { XhrFactory } from '@angular/common';
- маршрутизатор: Суворі перевірки на нуль повідомлять про те, що фрагмент потенційно є нульовим.
Шлях міграції: додайте нульову перевірку. - маршрутизатор: Тип
RouterLinkActive.routerLinkActiveOptions
введення було
розширено, щоб забезпечити більш точне керування. Код, прочитаний раніше
можливо, цю властивість потрібно оновити для врахування нового типу.
Оновлена дорожня карта
Відповідно до поточного Angular Дорожня карта, зараз команда зайнята такими вдосконаленнями:
- Покращення роботи розробника під час налагодження та профілювання. Це повинно допомогти нам зрозуміти структуру компонентів (я думаю, що інструменти React Dev дозволяють React) і виявлення змін
- Покращення часу тестування та налагодження з автоматичним розривом: це має покращити ізоляцію між тестами та часом тестування. The TestBed також буде змінено на автоматичне очищення та знищення тестового середовища після виконання кожного тесту
- Використання ES2017+ як виведення за замовчуванням: вони визначать блокпости та видалять їх, щоб можна було оновити мову виводу за замовчуванням
- Інтеграція MDC Web в Angular Material
- Покращення доступності компонентів Angular Material
- Публікація посібників щодо передових концепцій, таких як виявлення змін, профілювання продуктивності, взаємодія з Zone.js тощо
- Оновлення стратегії тестування e2e (cfr вище)
- Підготовка до оновлення до RxJS v7+. Як ви, можливо, знаєте, RxJS 7 був вийшов нещодавно. Сподіваюся, незабаром ми зможемо оновити
У майбутньому команда Angular планує:
- Подивіться на архітектуру мікроінтерфейсу: вони можуть представити засоби для легкого створення мікроінтерфейсів за допомогою Angular
- Покращте роботу розробника за допомогою суворого введення для форм Angular (це нам так необхідно)
- Зробіть Zone.js необов’язковим, що має спростити структуру, покращити налагодження, зменшити розмір пакетів і навіть дозволити використовувати переваги рідного синтаксису async/await
- Підвищте продуктивність збірки, інтегрувавши компілятор Angular (
ngc
) як плагін компілятора TypeScript - Дозволити додавати директиви до елементів хосту. Цього теж давно вимагала спільнота!
- Зробіть NgModules необов’язковим, щоб полегшити процес навчання
- Надайте нам простіші засоби для реалізації поділу коду на рівні компонентів
Кутовий матеріал і кутовий CDK
Sass міграція
Внутрішньо як Angular Material, так і CDK перейшли до нова модульна система Sass.
Якщо ваша програма використовує будь-який із них, вам потрібно буде переконатися, що ви замінили node-sass
by sass
: https://www.npmjs.com/package/sass. The node-sass
пакет більше не підтримується!
Завдяки цій міграції API темування Sass було вдосконалено, і тепер він дозволяє нам використовувати переваги Sass @use
утиліта
Тепер існує єдина точка входу для @angular/material
та @angular/cdk
.
Нарешті, API також були змінені для ясності. Багато функцій, міксинів і змінних було перейменовано.
Ви можете знайти більше інформації про ці зміни в новому посібнику з тем: https://github.com/angular/components/blob/master/guides/theming.md. Крім того, зауважте, що посібники на https://material.angular.io були переписані, щоб продемонструвати новий API, і містять пояснення.
Процес оновлення автоматично перенесе код до нового Sass API. Ви можете знайти приклади до/після тут.
Кутові зміни CDK
Версія 12 містить ряд зміни до Angular CDK.
Тут я перелічу лише нові функції, але ви можете ознайомитися з примітками до випуску, якщо вам потрібні докладніші відомості про виправлення помилок і покращення продуктивності:
- Перетягування: вилучена подія тепер включає a
dropPoint
властивість, що визначає точну точку, куди було вказано вказівником миші, коли елемент було випущено. Більше інформації тут - Перетягування: Контейнер попереднього перегляду тепер можна налаштувати
- таблиця: Нова директива дозволяє увімкнути повторювач повторюваного перегляду, який кешує видалені рядки та повторно використовує їх, коли набір даних змінюється. Це може допомогти покращити продуктивність (зменшити затримку)
- таблиця: Доданий зміщення липких елементів до
StickyUpdate
інтерфейс - Stepper: коли користувач намагається відійти від кроку, an
interacted
подія зараз буде випромінюється - Stepper: Тепер орієнтація може бути змінилися
- Доступність:
FocusOptions
об'єкт тепер можна пройти у різні методи захоплення фокуса - Тестування: Нове середовище використання WebDriver. Я ще не занурювався в це, тому не можу сказати вам більше. Перевірити PR
Кутові зміни матеріалу
Існує також ряд зміни для Angular Material. Знову ж таки, перегляньте примітки до випуску, щоб отримати повний список виправлень помилок.
Нові можливості:
- Вибір дати: Більше не залежить на діалог
- Stepper: тепер орієнтацію можна змінювати динамічно (порівняйтеся аналогічною зміною в CDK)
- Stepper: дозволити вмісту бути передано ліниво
- Меню: дозволити оновити позицію меню програмно
- Мат помилка: Зараз використовує
aria-live="polite"
замістьrole="alert"
. Детальніше тут - Tabs: Додати метод до програмно встановити фокус на певній вкладці
- список: тепер повертає масив зі зміненими параметрами з
selectAll
таdeselectAll
методи. Перевірити PR докладніше - Посуньте перемикач: Дозволити глобально налаштувати колір за замовчуванням через провайдера
- Tooltip: тепер показує ефективну позицію підказки через клас компонента
- радіо, прапорець та Повзунок: Додайте фоновий колір цих компонентів у роздрукувати таблиці стилів
В експериментальній версії також є ряд змін: https://github.com/angular/components/blob/master/CHANGELOG.md#material-experimental.
Кутовий універсальний
Angular Universal 12 також є свіжий з духовки.
З цим випуском Universal зараз вставляє критичний CSS за замовчуванням, що дуже круто.
Universal тепер включає новий proxyConfig
опція надання користувальницьких конфігурацій проксі для ssr-dev-server
будівельник.
У цій версії є новий (експериментальний) двигун SSR під назвою Клевер (нагадує мені якісний інструмент в екосистемі Java). Цей новий двигун виглядає багатообіцяючим. Це має на меті спростити речі, позбутися нас Window is undefined
помилка, усунути необхідність у кількох збірках для SSR/попереднього рендерингу, генерувати оболонки програми без додаткової збірки тощо. Ймовірно, ми почуємо більше про це пізніше. Якщо вам цікаво, то перевірте PR.
Ця версія включає a будівельник який можна використовувати для створення статичних сторінок (тобто попереднього рендерингу) за допомогою нового підходу Universal Clover.
Нарешті, ця версія також включає Підтримка TLS для dev-сервера.
Google Maps
Як відомо, Angular містить компоненти для Google Maps і Youtube. У версії 12 є кілька покращень для компонента Google Maps:
- Тепер включає в себе
icon
введення, щоб легко налаштувати маркер - Тепер випромінює a
clusterClick
подія, коли кластер було натиснуто - Включає в себе обгортка навколо Google Maps Geocoder API та експорту
MapDirectionsResponse
, який раніше не викривався - Вводить підтримку для візуалізація теплових карт
- Доданий
MapDirectionsRenderer
, що дозволяє відображати маршрути на карті, іMapDirectionsService
, який загортаєgoogle.maps.DirectionsService
для розрахунку маршрути між двома точками. - Нові
options
введення на кластеризатор маркерів, подібно до інших директив.
Модернізація
Як завжди, доступний повний посібник з оновлення ng update
допоможе вам: https://update.angular.io/?l=3&v=11.0-12.0
Якщо ви використовуєте Nrwl NX (ви справді повинні), зауважте, що Nx 12.3 вже містить підтримку Angular 12! Дізнайтеся більше про це тут. Як додаткову перевагу Nx також допоможе вам перейти з TSLint на ESLint (і настав час!)
Висновок
У цій статті я дослідив нові функції Angular 12.
Як завжди, це реліз героїчний (що ще може бути?! 😎).
Айві рухається вперед, і, сподіваюся, «незабаром» ми будемо менше дратуватися ngcc
, оскільки екосистема мігрує. У цьому випуску є багато чудових змін, тож перевірте його та оновіть зараз!
Ось і все на сьогодні!
PS: якщо ви хочете дізнатися багато інших цікавих речей про продукт/програмне забезпечення/веб-розробку, тоді перегляньте Концепції розробника серії, (https://mailchi.mp/fb661753d54a/developassion-newsletter)[підпишіться на мою розсилку], і приходь і привітайся в Twitter!
- Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
- Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. Доступ тут.
- джерело: https://www.codementor.io/dsebastien/angular-12-in-depth-1j62geeq5n
- 1
- 11
- 2018
- 2020
- 2022
- 7
- 9
- a
- Здатний
- МЕНЮ
- про це
- вище
- абсолют
- Прийняти
- Приймає
- доступ
- доступність
- рахунки
- точно
- насправді
- доданий
- доповнення
- просунутий
- Перевага
- після
- Цілі
- Оповіщення
- алгоритм
- алгоритми
- ВСІ
- Дозволити
- дозволяє
- тільки
- вже
- альтернатива
- альтернативи
- хоча
- завжди
- серед
- та
- Angular
- анімації
- оголошений
- Оголошення
- Інший
- де-небудь
- API
- Інтерфейси
- додаток
- з'являтися
- додаток
- застосування
- підхід
- квітня
- архітектура
- навколо
- масив
- стаття
- статті
- асоційований
- Атрибути
- authors
- автоматичний
- автоматично
- наявність
- доступний
- Галас
- назад
- Back-end
- фон
- бар
- заснований
- основа
- оскільки
- перед тим
- буття
- користь
- Краще
- між
- Великий
- найбільший
- Біт
- Блог
- марка
- Новинка
- Розрив
- Приносить
- приніс
- браузер
- браузери
- Помилка
- будувати
- будівельник
- Створюємо
- Будує
- вбудований
- Пакет
- тягар
- званий
- покликання
- можливості
- випадок
- випадків
- Викликати
- викликаний
- зміна
- Зміни
- перевірка
- Перевірки
- Chrome
- ясність
- клас
- класів
- ясно
- очевидно
- Закривається
- кластер
- код
- Збір
- color
- майбутній
- коментарі
- співтовариство
- сумісність
- сумісний
- повний
- складний
- компонент
- Компоненти
- поняття
- стурбований
- висновок
- підключений
- вважає
- послідовний
- постійна
- споживати
- Контейнер
- зміст
- контекст
- продовжувати
- контроль
- контролер
- управління
- Прохолодно
- Core
- відповідає
- Коштувати
- може
- курс
- обкладинка
- покритий
- створювати
- створений
- створення
- створення
- критичний
- крос-браузер
- вирішальне значення
- CSS
- цікавий
- Поточний
- В даний час
- виготовлений на замовлення
- власні властивості
- налаштувати
- Дата
- день
- Днів
- мертвий
- угода
- глибше
- дефолт
- залежить
- розгортання
- глибина
- деталь
- деталі
- Виявлення
- визначає
- визначення
- DEV
- Розробник
- розробка
- DID
- різний
- DIG
- директиви
- безпосередньо
- розподілений
- Розподілу
- справи
- DOM
- вниз
- скачати
- зворотний бік
- впав
- краплі
- дублікати
- під час
- кожен
- легше
- легко
- екосистема
- Ефективний
- зусилля
- або
- елементи
- вбудований
- включіть
- дозволяє
- інкапсульований
- кінець в кінець
- енергія
- двигун
- підвищена
- досить
- забезпечувати
- запис
- Навколишнє середовище
- середовищах
- помилка
- помилки
- особливо
- і т.д.
- Ефір (ETH)
- оцінювати
- Навіть
- Event
- Події
- все
- все
- еволюціонували
- еволюціонує
- приклад
- Приклади
- відмінно
- виняток
- виконувати
- виконання
- існуючий
- розширений
- очікуваний
- досвід
- Пояснювати
- пояснені
- пояснюючи
- Пояснює
- пояснення
- Розвіданий
- дослідник
- експорт
- піддаватися
- вирази
- продовжити
- розширення
- зовнішній
- додатково
- фасилітувати
- FAIL
- достатньо
- Падати
- вентилятор
- ШВИДКО
- швидше
- страх
- особливість
- риси
- Федерація
- зворотний зв'язок
- кілька
- поле
- Поля
- філе
- Файли
- в кінці кінців
- знайти
- виявлення
- Пожежа
- виправляти
- потік
- Сфокусувати
- фокусується
- після
- Примусово
- форма
- формат
- форми
- Вперед
- знайдений
- Підвалини
- фракція
- FRAME
- Рамки
- від
- Frontend
- Повний
- функція
- Функції
- далі
- майбутнє
- породжувати
- генерує
- породжує
- отримати
- GitHub
- Давати
- даний
- дає
- дає
- Go
- буде
- добре
- Google Chrome
- Google Maps
- графік
- великий
- керівництво
- Гід
- обробляти
- Жорсткий
- має
- почутий
- допомога
- тут
- hi
- Високий
- Виділіть
- історія
- гачки
- З надією
- господар
- Як
- HTML
- HTTPS
- величезний
- читається людиною
- Я БУДУ
- ідея
- ідентифікований
- ідентифікувати
- Impact
- здійснювати
- реалізація
- реалізовані
- імпорт
- важливо
- імпорт
- удосконалювати
- поліпшений
- поліпшення
- поліпшення
- in
- включати
- включені
- includes
- невірно
- вказує
- побічно
- інформація
- інформація
- спочатку
- інноваційний
- вхід
- розуміння
- встановлювати
- установка
- екземпляр
- замість
- інструкції
- інтегрувати
- Інтеграція
- інтеграція
- Взаємодії
- цікавий
- інтерфейс
- внутрішній
- інтернет
- вводити
- введені
- Вводить
- введення
- інтуїтивний
- інвестицій
- ізоляція
- питання
- IT
- Java
- JIT-
- робота
- приєднатися
- json
- тримати
- Дитина
- Знати
- мова
- більше
- останній
- Затримка
- останній
- Ліга
- витік
- УЧИТЬСЯ
- вивчення
- Legacy
- рівень
- Важіль
- libraries
- бібліотека
- Лінія
- LINK
- пов'язаний
- список
- розташування
- Довго
- багато часу
- довгостроковий
- довше
- подивитися
- подивився
- шукати
- серія
- низький
- made
- підтримувати
- підтримує
- основний
- Більшість
- зробити
- РОБОТИ
- Робить
- багато
- карта
- карти
- матч
- узгодження
- матеріал
- Матриця
- Макс
- засоби
- пам'ять
- Меню
- Злиття
- повідомлення
- повідомлення
- метадані
- метод
- методика
- Microsoft
- може бути
- мігрувати
- міграція
- мінімальний
- незначний
- відсутній
- помилка
- режим
- сучасний
- Модулі
- Модулі
- більше
- найбільш
- рухатися
- переміщення
- Mozilla
- множинний
- Названий
- а саме
- Імена
- рідний
- Переміщення
- необхідно
- Необхідність
- потреби
- негативний
- мережу
- Нові
- Нові можливості
- новини
- Інформаційний бюлетень
- наступний
- Next.js
- вузол
- Node.js
- вузли
- примітки
- Примітно,
- Повідомлення
- номер
- номера
- об'єкт
- Очевидний
- сталося
- жовтень
- офіційний
- Офіційно
- Старий
- ONE
- оператор
- варіант
- Опції
- порядок
- організації
- спочатку
- Інше
- Розетки
- поза
- огляд
- власний
- пакет
- пакети
- параметр
- параметри
- особливо
- частини
- Пройшов
- Проходження
- шлях
- виконувати
- продуктивність
- виступи
- виконанні
- перспектива
- частина
- трубопровід
- місце
- плани
- plato
- Інформація про дані Платона
- PlatoData
- підключати
- точка
- популярність
- положення
- це можливо
- пошта
- потенційно
- потужний
- точно
- надавати перевагу
- наявність
- представити
- досить
- запобігати
- попередній перегляд
- попередній
- раніше
- попередній
- ймовірно
- проблеми
- процес
- обробка
- Production
- профілювання
- програма
- проект
- проектів
- перспективний
- правильний
- властивості
- власність
- забезпечувати
- за умови
- забезпечує
- повноваження
- опублікований
- Штовхати
- головоломка
- якість
- Швидко
- залучення
- діапазон
- Сировина
- RE
- Реагувати
- Читати
- розуміючи,
- причина
- Причини
- рекомендуючи
- запис
- зменшити
- відображати
- реєструючий
- пов'язаний
- звільнити
- випущений
- віддалений
- видаляти
- Вилучено
- надання
- ПОВТОРНО
- замінити
- звітом
- запросити
- запитів
- вимагати
- вимагається
- пружний
- відповідь
- REST
- результат
- результати
- повертати
- повернення
- Умови повернення
- позбавитися
- блокпости
- Роль
- корінь
- Маршрут
- маршрутизатор
- Правило
- Правила
- прогін
- біг
- сейф
- то ж
- Sass
- зберегти
- сценарії
- сфера
- другий
- Здається,
- сенс
- Серія
- обслуговування
- Сесія
- комплект
- установка
- установка
- тінь
- Короткий
- Повинен
- демонстрації
- Signatures
- аналогічний
- простий
- спростити
- з
- один
- ситуація
- Розмір
- розміри
- Повільно
- невеликий
- менше
- So
- так далеко
- рішення
- Рішення
- деякі
- що в сім'ї щось
- Звучати
- Source
- Простір
- конкретний
- стабільний
- стояти
- standard
- стандартів
- старт
- Починаючи
- Статус
- залишатися
- Крок
- Як і раніше
- Стоп
- зберігати
- зберігати
- Історія
- Стратегія
- строгий
- суворіші
- структура
- стиль
- підписуватися
- такі
- Super
- підтримка
- Підтриманий
- Опори
- сюрпризи
- перемикач
- система
- Вітер
- Попутний вітер
- Приймати
- приймає
- взяття
- Мета
- команда
- команди
- шаблон
- Шаблони
- тест
- Тестування
- Тести
- Команда
- Джерело
- їх
- річ
- речі
- У цьому році
- через
- час
- трудомісткий
- Терміни
- times
- до
- разом
- знак
- Тонна
- Тон
- занадто
- інструмент
- інструменти
- верхній рівень
- до
- простежувати
- Простеження
- трек
- Відстеження
- Перетворення
- перехід
- Переклад
- прозорий
- викликати
- правда
- Типи
- Машинопис
- типово
- при
- розуміти
- Universal
- невикористаний
- Майбутні
- Оновити
- оновлений
- Updates
- оновлення
- модернізація
- URL
- us
- Використання
- використання
- користувач
- користувачі
- комунальні послуги
- утиліта
- перевірка достовірності
- валідатори
- Цінний
- значення
- Цінності
- різний
- Ve
- версія
- вид
- W3
- чекати
- хотів
- попередження
- Web
- Webpack
- week
- тижня
- ласкаво просимо
- Що
- Чи
- який
- в той час як
- ВООЗ
- волі
- в
- без
- Виграв
- чудовий
- Work
- працював
- робочий
- б
- запис
- лист
- письмовий
- X
- рік
- вашу
- YouTube
- зефірнет