Создание компонентов Angular CLI в указанную папку: как указать путь?

Правильный синтаксис для указания пути в Angular CLI

Angular CLI поддерживает указание пути относительно папки src/app через синтаксис с косой чертой. Основная ошибка новичков — указание пути без учета относительности. Вот корректный вариант вашей команды:

ng generate component features/user-profile/user-card

Если папка features/user-profile уже существует, компонент создастся в ней. Если нет — CLI создаст ее автоматически. Важно: путь указывается относительно src/app, поэтому писать src/app/features/... не нужно.

Решение проблемы с модулями

Чтобы компонент автоматически импортировался в нужный модуль, используйте флаг --module:

ng generate component features/user-profile/user-card --module features/user-profile/user-profile.module.ts

Если модуль находится в той же папке, что и компонент, можно сократить:

ng generate component user-card --module user-profile.module.ts

Работа с префиксами

Если у вас настроены префиксы в angular.json (например, "prefix": "app"), то селектор компонента будет app-user-card. Чтобы изменить префикс для конкретного компонента, используйте флаг --prefix:

ng generate component user-card --prefix=up

Селектор станет up-user-card.

Продвинутые примеры

Создание компонента с вложенными папками и указанием модуля:

ng generate component shared/ui/custom-button --module shared/shared.module.ts --flat

• --flat — не создает отдельную папку для компонента, файлы будут в shared/ui/
• --skip-tests — пропустить создание тестового файла
• --style=scss — указать препроцессор стилей

Настройка дефолтного поведения через angular.json

Если вы часто создаете компоненты в определенной папке, можно настроить дефолтный путь в angular.json:

{
  "projects": {
    "my-app": {
      "schematics": {
        "@schematics/angular:component": {
          "path": "features",
          "module": "app.module.ts"
        }
      }
    }
  }
}

Тогда команда ng g c user-card создаст компонент в src/app/features/user-card.

Полный пример рабочей команды

ng g c dashboard/admin/user-list --module dashboard/dashboard.module.ts --style=scss --skip-tests

Эта команда создаст:

• src/app/dashboard/admin/user-list/user-list.component.ts
• src/app/dashboard/admin/user-list/user-list.component.html
• src/app/dashboard/admin/user-list/user-list.component.scss
• Автоматически добавит UserListComponent в declarations массива DashboardModule

Частые ошибки и их решение

Ошибка: "Path does not exist" — убедитесь, что вы не пишете абсолютный путь или путь, начинающийся с src/. Всегда используйте относительный путь от src/app.

Ошибка: Компонент создан, но не работает — проверьте, что модуль, в который вы импортируете компонент, загружен (не ленивый, если не настроен маршрут).

Ошибка: Селектор не соответствует ожиданиям — используйте --prefix или измените глобальный префикс в angular.json.

ng generate component user-card --path src/app/features/user-profile

ng generate component shared/ui/standalone-button --standalone

cd src/app/features/user-profile
ng generate component user-card
ng generate component user-avatar
ng generate component user-stats

"scripts": {
  "g:feature": "ng generate component --module app.module.ts --path src/app/features"
}