Для создания компонента в Angular используется Angular CLI — официальный инструмент командной строки, который позволяет генерировать компоненты, модули, сервисы, пайпы, директивы и другие сущности проекта. Angular CLI автоматизирует создание файлов, регистрацию компонента в модуле и соблюдение стандартов архитектуры Angular-приложений.

1. Базовая команда для создания компонента

ng generate component <имя>

# или сокращённо:

ng g c <имя>

Пример:

ng g c user-profile

Эта команда создаёт компонент UserProfileComponent в директории src/app/user-profile.

2. Что создаёт CLI

По умолчанию создаются следующие файлы:

src/app/user-profile/
├── user-profile.component.ts // Класс компонента
├── user-profile.component.html // Шаблон (view)
├── user-profile.component.scss // Стили
├── user-profile.component.spec.ts // Тестовый файл

Также Angular CLI автоматически:

• регистрирует компонент в ближайшем NgModule (например, AppModule)

• добавляет его в массив declarations

3. Параметры генерации

CLI поддерживает множество флагов, позволяющих контролировать генерацию.

3.1 --flat

Создаёт файлы без вложенной папки:

ng g c user-profile --flat

Результат:

src/app/
├── user-profile.component.ts
├── user-profile.component.html
...

3.2 --inline-template (-t)

Вставляет HTML-шаблон прямо в файл компонента:

ng g c user-profile --inline-template
@Component({
selector: 'app-user-profile',
template: \`<p>User Profile Works!</p>\`,
styleUrls: \['./user-profile.component.scss'\]
})

3.3 --inline-style (-s)

Вставляет стили непосредственно в компонент:

ng g c user-profile --inline-style
@Component({
selector: 'app-user-profile',
templateUrl: './user-profile.component.html',
styles: \[\`p { color: red; }\`\]
})

3.4 --skip-tests

Пропускает создание .spec.ts файла для тестов:

ng g c user-profile --skip-tests

3.5 --style=<тип>

Выбор формата стилей (css, scss, sass, less):

ng g c user-profile --style=scss

4. Создание компонента в конкретной папке

Можно указать путь к директории:

ng g c features/user/user-profile

Результат:

src/app/features/user/user-profile/
├── user-profile.component.ts
...

5. Автоматическая регистрация в модуле

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

Если таких нет, регистрация происходит в AppModule.

Пример регистрации:

@NgModule({
declarations: \[
AppComponent,
UserProfileComponent
\],
...
})
export class AppModule { }

Если в директории есть user.module.ts, компонент будет зарегистрирован в нём.

6. Создание компонента внутри Feature-модуля

Предположим, у вас есть модуль UserModule:

src/app/features/user/
├── user.module.ts

Создание:

ng g c features/user/components/user-profile

CLI найдёт user.module.ts и зарегистрирует компонент в UserModule.

7. Пример: полный процесс генерации

1. Команда:

ng g c dashboard/widgets/chart

1. Результат:

src/app/dashboard/widgets/chart/
├── chart.component.ts
├── chart.component.html
├── chart.component.scss
├── chart.component.spec.ts

1. Регистрация (в DashboardModule):

@NgModule({
declarations: \[ChartComponent\],
...
})
export class DashboardModule { }

8. Конфигурация CLI по умолчанию (angular.json)

Можно настроить дефолтное поведение CLI:

"schematics": {
"@schematics/angular:component": {
"style": "scss",
"skipTests": true,
"inlineStyle": false,
"inlineTemplate": false
}
}

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

После генерации и регистрации компонент можно использовать через его selector:

@Component({
selector: 'app-user-profile',
...
})

HTML:

<app-user-profile></app-user-profile>

Angular парсит шаблоны и вставляет соответствующий компонент.

10. Советы по организации компонентов

• Группируйте компоненты по фичам: features/user/components/...

• Переиспользуемые UI-компоненты (кнопки, карточки, модалки) выносите в shared/components

• Изолируйте компоненты по назначению: pages/, widgets/, containers/, dumb/presentational/

11. Генерация с помощью ng generate для Standalone компонентов (Angular 14+)

С Angular 14 появился новый тип компонентов — standalone components. Они не требуют объявления в NgModule.

Команда:

ng g c user-card --standalone

Результат:

@Component({
standalone: true,
selector: 'app-user-card',
templateUrl: './user-card.component.html',
styleUrls: \['./user-card.component.scss'\],
imports: \[CommonModule\]
})
export class UserCardComponent { }

Использование:

<app-user-card></app-user-card>

Для использования в роутинге:

const routes: Routes = \[
{ path: 'card', component: UserCardComponent }
\];