Изменяют ли автономные компоненты способ написания кода в Angular?

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

Что такое автономные компоненты в Angular?

Автономные компоненты позволяют разработчикам создавать веб-приложения без необходимости использования NgModule. Они были впервые представлены в версии 14, но только в режиме предварительного просмотра для разработчиков. Начиная с версии 15, автономные API являются частью стабильного API. Их можно полностью использовать с Angular Elements, Router, HttpClient и многими другими.

Кроме компонентов, мы также можем создавать автономные директивы и пайпы.

Создание автономного компонента.

В версии 15 Angular CLI представил команду для легкого создания новых автономных компонентов через:

	
ng g componentName --standalone

Они должны быть помечены как standalone: true и не должны быть частью какого-либо ngModule. Если вы попробуете добавить автономный компонент в модуль, Angular выдаст ошибку.

Любые зависимости, необходимые для компонента, могут быть объявлены непосредственно в массиве imports.

	
@Component({
  standalone: true,
  selector: 'app-card',
  imports: [ImageComponent, LayoutComponent],
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CardComponent {
  ...
}

Любой существующий компонент может быть преобразован в автономный. При этом следует учитывать всего лишь три момента:

Добавить standalone: true.
Удалить компонент из массива объявлений модуля, в котором он использовался.
Использовать массив imports для добавления всех необходимых зависимостей.

Использование автономного компонента.

Автономный компонент, пайп или директива может использоваться внутри другого автономного компонента или внутри модуля. В обоих случаях вы должны добавить его в раздел imports так же, как и обычный NgModule.

	
@NgModule({
  declarations: [CardComponent],
  exports: [CardComponent], 
  imports: [ImageComponent],
})
export class CardsLayoutComponent {
  ...
}

Загрузка автономного компонента.

С версии 14 вы можете загрузить всё приложение, используя автономный компонент в качестве корневого компонента приложения. Для этого можно использовать функцию bootstrapApplication в файле main.ts.

	
import {bootstrapApplication} from '@angular/platform-browser';
import {CardComponent} from './card.component';

bootstrapApplication(CardComponent, {
  providers: []
});

Затем в файле index.html вы должны заменить app-root на селектор вашего автономного компонента.

	
<body>
  <app-card></app-card>
</body>

Настройка инъекции зависимостей (Dependency Injection).

При загрузке вашего приложения с помощью автономного компонента вы можете внедрять сервисы, передавая их в массив providers функции bootstrapApplication:

	
...
bootstrapApplication(AppComponent,{
  providers: [
    {provide: API_URL, useValue: 'standalonecomponents.com/api'},
    {provide: AuthService, useClass: AuthService},
    importProvidersFrom(RouterModule.forRoot(routes))]
});
...

Маршрутизация с использованием автономного компонента.

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

	
import { CardComponent } from "./card.component";

export const routes: Routes = [
    {
        path: 'card',
        component: CardComponent
    }
];

После создания маршрутов вы должны загрузить приложение с помощью автономного компонента и импортировать маршруты в массив providers.

	
import { RouterModule } from '@angular/router';
import { importProvidersFrom, inject, enableProdMode } from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';

import { routes } from './routing';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent,{
  providers: [
    importProvidersFrom(RouterModule.forRoot(routes))]
});

Ленивая загрузка автономного компонента.

Автономные компоненты могут быть лениво загружены с легкостью. Это можно достичь с помощью использования loadComponent:

	
export const routes: Route[] = [
  {
    path: 'card', 
    loadComponent: () => 
      import('./card.component')
        .then(m => m.CardComponent)},
];

Если у вас есть случай, когда вы хотите загрузить сразу несколько маршрутов. Например, у вас есть конечные точки GET, POST и DELETE для компонента карточки, вы можете использовать функцию loadChildren вместо loadComponent.

	
export const routes: Route[] = [
  {
    path: 'card', 
    loadComponent: () => 
      import('./card/card.routes')
        .then(m => m.cardRoutes)},
];

Подводя итог, автономные компоненты являются удобными и простыми в использовании. Они могут упростить способ написания компонентов, сократить избыточный код и помочь новичкам лучше освоить Angular путем устранения концепции NgModule.