Сегодня мы поговорим о будущем Angular, то есть --standalone. Это относится к компонентам, директивам или каналам, которые можно использовать независимо от NgModule.
Давайте создадим приложение без NgModule.
Сначала нам нужно установить/обновить наш angular-cli, затем проверить версию через cli ng версии, затем создайте свой первый проект без NgModule.

Вы можете создавать следующие компоненты без NgModule part
Автономные компоненты
Автономные директивы
Автономные каналы
Вы также можете использовать автономный компонент отложенной загрузки

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

До Angular 14 каждый компонент объявлялся в любой части модуля, независимо от того, appModule это или любой другой модуль, но без создания модуля или объявления в каком-либо другом модуле мы не могли использовать какой-либо компонент.
Итак, после выпуска v14, в эту версию добавлена ​​новая функция: мы можем использовать компонент без объявления в каком-либо модуле, который называется компонентом standalone.
Архитектура на основе компонентов с изменением правил игры для разработки, как в части NgModule.

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

После создания нового проекта вы можете создать новый автономный компонент с помощью команды cli ng g c <componentName> –-standalone , после запуска этой команды в ваш проект будет добавлен автономный компонент.
Я создаю один компонент ng g c home --standalone.

import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
@Component({
   selector: 'app-home',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
constructor() { }
}

Импортируйте другие полезные зависимости в соответствии с вашими требованиями.

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

import { SharedModule } from './../shared/shared.module';
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
@Component({
   selector: 'app-home',
   standalone: true,
   imports: [CommonModule, SharedModule],
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })

Начальная загрузка автономного компонента

После выпуска Angular 14 вы можете воспроизводить все приложение с автономным компонентом, загрузив этот компонент.

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
----------------------------------
bootstrapApplication(HomeComponent).catch(err => console.error(err));

После изменения в main.ts теперь вам нужно изменить в файле index.html

<body>
   <app-root></app-root>
 </body>
 --------------------------------
 <body>
   <app-home></app-home>  <!--your standalone component-->
 </body>

Исходный код Github

Итак, наконец, мы узнали об автономном компоненте, о том, как мы можем использовать и загружать его в нашем приложении.

Подробнее об этом узнаете в следующем блоге.

Если вы хотите учиться со мной, подпишитесь на меня в социальных сетях, а также зайдите на мой сайт.

https://www.ankitkumarsharma.com/ и подписывайтесь на меня в GitHub, Twitter, Medium и Разработка для получения дополнительной информации о статьях с практическими запросами кода.

Спасибо, счастливого программирования