Angular 15 теперь в прямом эфире: все новые функции, изменения в коде и износы, которые нужно знать!

• Обновления
• 22 ноября 2022 года

Виджай Садху

Angular, самая востребованная, с открытым исходным кодом интерфейсная структура, наконец, падает в еще одном обновлении версии - Angular 15. Угловой 14 Внедрил много новых захватывающих экспериментальных функций и лучшие практики массивного кода, но похоже, что новая версия Angular 15, все о том, чтобы получить стабильность.

Наконец, новое стабильное обновление, которого ждали все энтузиасты технологий и сообщество Angular. Это новое обновление принесло огромные захватывающие изменения. Итак, давайте погрузимся в новый мир Angular 15.

Какие новые функции ввел Angular 15?

В связи с другими предыдущими обновлениями и удалением устаревшего компилятора Angular 15 обновление приносит много новых улучшений - стабильность и расширенную поддержку, что определенно обещает разблокировать повышенный опыт и производительность разработчиков.

1.Стабильный автономный компонент API

API автономных компонентов был введен в Angular 14 для создания приложений Angular без определения их значения. NgModulesВ Angular 15 автономные компоненты API наконец-то достигают своей степени стабильности после тщательного наблюдения за производительностью и изменений.

Сообщество разработчиков Angular позаботилось о том, чтобы благодаря этой недавно достигнутой стабильности автономные компоненты могли работать в синхронизации с другими компонентами. HttpClientУгловые элементы и многие другие.

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

import {bootstrapApplication} from '@angular/platform-browser';
import {ImageGridComponent} from'./image-grid';

@Component({
 standalone: true,
 selector: 'photo-gallery',
 imports: [ImageGridComponent],
 template: `
   … <image-grid [images]="imageList"></image-grid>
 `,
})
export class PhotoGalleryComponent {
 // component logic
}

bootstrapApplication(PhotoGalleryComponent);

Используя imports Функция, вы можете даже ссылаться на автономные директивы и трубы.

Теперь вы можете пометить компоненты, директивы и трубы как "standalone: trueТеперь нет необходимости объявлять их в NgModule, иначе Angular-компилятор выкинет ошибку.Кроме того, теперь вы можете импортировать NgModule непосредственно внутри автономного компонента, написав import: [module_name].

2. Возможность разработки многомаршрутного приложения

Angular 15 поставляется с автономным API маршрутизатора для создания многомаршрутного приложения. Вот как вы можете объявить корневой маршрут:

export const appRoutes: Routes = [{
 path: 'lazy',
 loadChildren: () => import('./lazy/lazy.routes')
   .then(routes => routes.lazyRoutes)
}];

Здесь ленивые маршруты объявляются следующим образом:

import {Routes} from '@angular/router';

import {LazyComponent} from './lazy.component';

export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];

Вы можете зарегистрировать appRoutes в bootstrapApplication и называть его с помощью ProvideRouter API, который является дерево-поколебимым!

bootstrapApplication(AppComponent, {
 providers: [
   provideRouter(appRoutes)
 ]
});

Кроме того, Angular Bundlers теперь может удалять неиспользуемые функции во время сборки, что может привести к уменьшению размера файла кода на 11%.

3. Введение в состав директивы API

Все разработчики любят, когда их любимая фреймворк предлагает первоклассное многоразовое использование директив. В сообществе GitHub многие Разработчик Angular Мы попросили API, и, наконец, команда услышала его и сделала это возможным.

Так, Angular v15, наконец, вдохновлён запросом на функцию, сделанным на GitHub. Он представил API Directive Composition, который повышает удобство использования кода и выводит его на другой уровень. Он позволяет разработчикам повысить хост-элементы с помощью директив и максимально использовать Angular с помощью стратегии конечного повторного использования кода. Кроме того, все это может быть сделано с помощью Angular компилятора.

ПРИМЕЧАНИЕ: Вы можете использовать API для составления директив только с отдельными директивами.

@Component({
 selector: 'mat-menu',
 hostDirectives: [HasColor, {
   directive: CdkMenu,
   inputs: ['cdkMenuDisabled: disabled'],
   outputs: ['cdkMenuClosed: closed']
 }]
})
class MatMenu {}

Как видно выше, MatMenu Эффективно работает с помощью двух директив хоста: HasColor и CdkMenu.

Благодаря этому усовершенствованию, MatMenu MatMenu может быть унаследован с входами, выходами и логикой, связанной с директивой HasColor, и только логикой и входом из этих двух директив. CdkMenu.

Это может дать вам ощущение, как Deja Vu для концепции множественного наследования. Отличие Angular от других языков программирования заключается в разрешении конфликтов имен, и это относится только к примитивам пользовательского интерфейса.

4.Стабильная директива «NgOptimizedImage»

The NgOptimizedImage Директива была введена в предыдущей версии, чтобы легко принять лучшие практики для загрузки производительности изображения.Наконец, после длительного наблюдения разработчиков, эта директива достигла стабильной формы.
Последний эксперимент, проведенный Land’s End с этой функцией для одного приложения, показал 75-процентное улучшение загрузки изображения LCP (Largest Contentful Paint).

Ранее этот NgOptimizedImage Кроме того, Angular v15 предлагает множество функций и функций, но в директиве изображений добавлены новые интересные функции, которые заключаются в следующем:

1. автоматический srcset Поколение: Он автоматически генерирует srcset, который обеспечивает загрузку изображения соответствующего размера при запросе, что приводит к сокращению времени загрузки изображения.

2. Режим заполнения [экспериментальный]: Он устраняет необходимость декларирования размеров изображения и заполняет изображение в его родительский контейнер. Этот режим довольно эффективен, когда размеры изображения неизвестны вам или вам нужно перенести фоновое изображение CSS, чтобы использовать директиву изображения.

Но вопрос в том, как использовать эту отдельную директиву NgOptimizedImage?

Он может быть использован непосредственно в вашем угловом компоненте или NgModule.

import { NgOptimizedImage } from '@angular/common';

// Include it into the necessary NgModule
@NgModule({
 imports: [NgOptimizedImage],
})
class AppModule {}

// ... or a standalone Component
@Component({
 standalone: true
 imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}

При использовании этой Угловой директивы изображения в компоненте все, что вам нужно сделать, это заменить изображение. src атрибут с ngSrc, при этом обеспечивая определение атрибута приоритета для оптимизации скорости для LCP-изображений.

5.Теперь вы можете уменьшить количество буйлерплейта в гвардии

Давайте лучше разберемся в этой концепции с одним примером определения защитных механизмов, проверки деталей — вошел ли пользователь в систему или нет:

@Injectable({ providedIn: 'root' })
export class MyGuardWithDependency implements CanActivate {
 constructor(private loginService: LoginService) {}

 canActivate() {
   return this.loginService.isLoggedIn();
 }
}

const route = {
 path: 'somePath',
 canActivate: [MyGuardWithDependency]
};

Здесь, в этой программе, LoginService содержит основную логику, в которой охранник — вызывается только один триггер, который является  isLoggedIn ()Хотя этот сегмент кода имеет такую четкую структуру, он имеет много котельных, которые должны быть уменьшены.

Благодаря Функциональной гвардии маршрутизатора этот код может быть рефакторирован в заданный код ниже с необходимыми котельными пластинами.

const route = {
 path: 'admin',
 canActivate: [() => inject(LoginService).isLoggedIn()]
};

Лучшее в Функциональных Охранах то, что они компостируемы.С их помощью можно создавать фактороподобные функции, принимая заданную конфигурацию и возвращая охрану или функцию, которая решает вопрос.

6. Более чистые, лучшие следы

С обновлением Angular v15 отладка Angular приложений была упрощена и сделана более чистой и простой со следами стека. Команда разработчиков Angular обеспечила достижение стандарта для отслеживания большего количества кода разработки, чем отображение библиотек, которые она вызывает. Это достижение позволило сообщениям об ошибках использовать некоторые улучшения.

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

Ниже приведен фрагмент для предыдущих указаний на ошибку:

ERROR Error: Uncaught (in promise): Error
Error
   at app.component.ts:18:11
   at Generator.next (<anonymous>)
   at asyncGeneratorStep (asyncToGenerator.js:3:1)
   at _next (asyncToGenerator.js:25:1)
   at _ZoneDelegate.invoke (zone.js:372:26)
   at Object.onInvoke (core.mjs:26378:33)
   at _ZoneDelegate.invoke (zone.js:371:52)
   at Zone.run (zone.js:134:43)
   at zone.js:1275:36
   at _ZoneDelegate.invokeTask (zone.js:406:31)
   at resolvePromise (zone.js:1211:31)
   at zone.js:1118:17
   at zone.js:1134:33

Сложность в понимании этих ошибочных фрагментов заключалась в следующем:

1. Ввод сообщений об ошибках исходил от сторонних зависимостей (Angular framework, zone.js и RxJS).
2. Никакой информации о том, какое взаимодействие пользователя встретило эту ошибку.

После длительного сотрудничества с командой Angular и Chrome DevTool сообщество смогло интегрировать эти сторонние зависимости (с помощью node_modules, zone.js и т. Д.); И, таким образом, можно было достичь связанных следов стека.

Улучшение следов стека упоминается ниже:

ERROR Error: Uncaught (in promise): Error
Error
   at app.component.ts:18:11
   at fetch (async) 
   at (anonymous) (app.component.ts:4)
   at request (app.component.ts:4)
   at (anonymous) (app.component.ts:17)
   at submit (app.component.ts:15)
   at AppComponent_click_3_listener (app.component.html:4)

Теперь эти сообщения об ошибках предоставляют информацию о том, где была обнаружена ошибка, поэтому разработчики могут напрямую перейти к этой части кода и немедленно исправить ее.

7. Стабильные компоненты на основе MDC

Поскольку стабильность касается угловых материалов, команда разработчиков Angular упорно работала над рефакторингом своего компонента на основе угловых компонентов для веб-приложений. Кроме того, эти компоненты улучшены, чтобы обеспечить лучшую доступность и соответствие спецификациям углового дизайна материалов.

Здесь большая часть работы по рефакторингу была выполнена в частях DOM и CSS. После нового обновления по отзывчивости в старых приложениях Angular появятся некоторые стили, которые нуждаются в корректировке, особенно в случае CSS, перекрывающих внутренние элементы мигрированных компонентов.

В последнем Angular v15 старые реализации многих компонентов были устаревшими. Поэтому для их восстановления у разработчиков все еще есть возможность перейти к «наследие"импорт.

Например, вы можете вернуть старый mat-button Реализация путем импорта модуля кнопок.

import {MatLegacyButtonModule} from '@angular/material/legacy-button';

8. CDK Listbox

CDK расшифровывается как Component Dev Kit, который предлагает различные примитивы поведения, помогая в создании компонентов пользовательского интерфейса.В Angular v15 он получает новый примитив под названием CDK Listbox, позволяющий разработчикам настраивать взаимодействия Listbox, составленные по шаблону WAI-ARIA Listbox на основе требований.

Здесь поведенческие взаимодействия включают в себя взаимодействия клавиатуры, поддержку макета биди и управление фокусом.Независимо от того, какой из них вы используете, каждая директива придумывает связанные роли ARIA с соответствующими элементами хоста.

9. Расширенная поддержка строительства

В обновлении Angular 14 появилась возможность экспериментальной поддержки esbuild — более быстрого пакета javascript, что позволяет быстро строить с упрощением конвейера.

Angular 15 предлагает новую экспериментальную поддержку для разработки нового устройства. ng build --watch поддержка, Sass, SVG шаблон и замена файлов. angular.json Строитель:

"builder": "@angular-devkit/build-angular:browser-esbuild"

10.Прочие улучшения в Angular 15 функций

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

• Router Auto-Unwarps экспортирует по умолчанию для ленивых погрузок Он упрощает функции маршрутизатора, добавляя больше возможностей для уменьшения еще большего количества котельных. Здесь для ленивой загрузки маршрутизатор будет искать экспорт по умолчанию, и если он добьется успеха, он напрямую импортирует свой ленивый файл в код.

• Автоматическая служба поддержки импорта на языке - быстрое исправление: Теперь напишите свой Angular код более уверенно, максимально используя языковую службу. Вы можете использовать эту функцию для автоматического импорта компонентов и их исправлений в шаблоне, компоненты которого не используются в отдельном компоненте или в NgModule.

• Улучшенные угловые компоненты: Angular components’ v15 охватывает ряд улучшений доступности, включая эффективные коэффициенты контрастности, расширенные размеры сенсорных целей и усовершенствованную семантику ARIA. Кроме того, Angular components могут иметь свои API для настройки их плотности для лучшего опыта настройки темы.

Речь идет о новых изменениях и достижениях, включенных в Angular v15, но вопрос заключается в том, как вы разблокируете эти возможности Angular 15?

Как перейти на Angular 15?

Перед обновлением до Angular v15 вы должны знать расширение поддержки, отмену и амортизацию - изменение изменений, чтобы пересмотреть и рефакторировать существующую сборку Angular.

• Angular v15 расширил поддержку версий 14.20.x, 16.13.x и 18.10.x и прекратил поддержку версий 14.[15-19].x и 16[10-12].x.
• Angular 15 теперь поддерживает только TypeScript версии 4.8 или старше.
• В каталоге проекта приложения запустите команду: ng update @angular/core@15 @angular/cli@15 Чтобы сделать ваше приложение укрепленным с помощью Angular v15.
• @keyframes Name format was changed into "@keyframes host-my-cmp_foo { ... }”
  • Чтобы соответствовать этому переломному изменению:
    • Измените вид инкапсуляции компонента на None или ShadowDom.
    • Определите это правило в глобальных таблицах стилей
    • Определите это правило в своем собственном коде.

• Добавление явного конструктора в класс может вызвать ошибку.
• Из файла tsconfig.json: enableIvy Звонок был удален, так как в этом обновлении Ivy является только движком рендеринга.
• The canParse Метод был устранен, поэтому теперь его обязательно использовать. analyze и hint Параметры в методах анализа.
• RouterOutlet Он будет инстанцировать компонент только после завершения обнаружения изменений.
• The DATE_PIPE_DEFAULT_TIMEZONE функция была удалена, поэтому отныне нужно использовать ее замену DATE_PIPE_DEFAULT_OPTIONS Определить часовой пояс.
• The routerLinkWithHref Директива была удалена, поэтому с этого момента вам нужно использовать RouterLink директивы по управлению элементами с href атрибуты.

Ну, есть и другие методы и директивы, которые были удалены и обновлены новой упрощенной структурой синтаксиса. Итак, лучше перейти с Angular v14 на v15 миграционное руководство, чтобы обеспечить более плавную миграцию приложений.

Используйте следующую команду для обновления Angular 14 до Angular 15:

ng update @angular/cli @angular/core

Напишите нижеупомянутую команду в CLI, чтобы обновить ваш глобальный Angular:

npm i -g @angular/cli

Завернуть

Решение о запуске Ivy в 2020 году было лучшим, поскольку оно позволило много улучшений - NgModules был одним из них. Это улучшение помогает сделать кривую обучения проще и проще.

Команда Angular работает над улучшением конвейера рендеринга на стороне сервера, а улучшение повторной возможности использования кода является следующим шагом, чтобы сделать Angular более эффективным.

Итак, давайте перейдем на Angular v15 и подождем нового захватывающего обновления, чтобы познакомиться с ним.