Создать компонент для конкретного модуля с Angular-CLI


170

Я начинаю использовать angular-cli и уже много читал, чтобы найти ответ о том, что я хочу сделать ... безуспешно, поэтому я пришел сюда.

Есть ли способ создать компонент для нового модуля?

например: ng g module newModule

ng g component newComponent (как добавить этот компонент в newModule ??)

потому что поведение по умолчанию angular-cli заключается в размещении всех новых компонентов внутри app.module. Я хотел бы выбрать, где будет находиться мой компонент, чтобы я мог создавать отдельные модули и не иметь внутри всех своих компонентов app.module. Это можно сделать с помощью angular-cli или я должен сделать это вручную?

Ответы:


216

Чтобы создать компонент как часть модуля, вы должны

  1. ng g module newModule создать модуль,
  2. cd newModuleизменить каталог в newModuleпапку
  3. ng g component newComponent создать компонент как дочерний элемент модуля.

ОБНОВЛЕНИЕ: Angular 9

Теперь не имеет значения, в какой папке вы находитесь при создании компонента.

  1. ng g module NewMoudle создать модуль.
  2. ng g component new-module/new-component создать NewComponent.

Примечание. Когда Angular CLI видит new-module / new-component, он понимает и переводит регистр для соответствия new-module -> NewModule и new-component -> NewComponent. В начале это может сбить с толку, поэтому проще всего сопоставить имена в # 2 с именами папок для модуля и компонента.


92
Вы также можете остаться в корне проекта и добавить префикс компонента к имени модуля ng g component moduleName/componentName.
JayChase

3
В Angular CLI версии 1.6.8 я всегда получал сообщение о том, что «указанный модуль не существует», когда я разделяю существующий модуль. Это сработало, когда я попробовал следующую команду: ng generate service service1 --module = module1 / module1.module.ts . Примечание: мое имя службы - service1, а имя моего модуля - module1
Diallo

8
Это создаст новый компонент в указанном каталоге, но не зарегистрирует его в модуле. Это зарегистрирует это в app.module. вам нужно будет указать модуль с --moduleопцией, как:ng g component <your component> --module=<your module name>
Vinit Sarvade

3
устарела 6 октября, угловая 6
tom87416

4
Устаревшие. Angular 6 не зависит от структуры папок, чтобы увидеть, в каком модуле находится компонент. Два модуля могут находиться в одном каталоге. Ответ @ daniel stackoverflow.com/a/44812014/511719 работает для Angular 6.
imafish

145
ng g component nameComponent --module=app.module.ts

10
другие ответы работают, но это наиболее эффективно. Стоит добавить --dry-runк концу этого, просто чтобы посмотреть, что будет затронуто, это хорошая проверка здравомыслия
tony09uk

ng g component path/to/myComponent --module=app.module.ts --dry-runочень полезная команда; просто чтобы убедиться, что ваш компонент создан в правильном каталоге.
theman0123

74

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

ng g component newComponent

он сгенерирует компонент и импортирует его в файл app.module.ts

Единственный способ использовать CLI для автоматического импорта в другой модуль - это указать

ng g component moduleName/newComponent

где moduleName - это модуль, который вы уже определили в своем проекте. Если moduleName не существует, он поместит компонент в каталог moduleName / newComponent, но все равно импортирует его в app.module.


2
это был правильный ответ для меня в то время .. он работает правильно. Я создаю запрос на добавление, чтобы добавить эту информацию в документы. Один из его авторов попросил меня убрать часть компакт-диска .. в конце будет 1. ng g module newModule 2. ng g component new-module/newComponentпо его словам должен быть новый модуль вместо newModule
Elmer Dantas

Просто чтобы указать, используя технику Александра Цезельского и работает, как ожидалось. Должен отметить, что мне не нужно создавать компонент, просто нужно создать папку. Так что я просто mkdirпапка, а затем запустил нг компонента newComponent внутри вновь созданной папки.
Чарли-Гринман,

2
Я бы сказал, что полный ответng g component moduleName/newComponent -m moduleName
Славуган,

В моем случае имя компонента совпадает с именем модуля, поэтому я создал модуль с ng generate module {modComName}1) создал папку 2) создал файл модуля внутри папки с тем же именем; команда ng generate component {modComName}фактически 1) Создает файл компонента в папке с тем же именем 2) Изменен модуль для импорта компонента
The Red Pea

Будьте осторожны, если вы создаете модуль и импортируете его в базовый модуль; ngдобавляет импорт в конец массива; но вы можете захотеть: «Порядок маршрутов в конфигурации имеет значение, и это сделано специально».
Красный горох

37

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

Для создания модуля запустите это:

ng g module foo

Чтобы создать компонент в папке модуля foo и добавить его в коллекцию объявлений foo.module.ts, выполните следующее:

ng g component foo/fooList --module=foo.module.ts

И Cli вырежет модуль и компонент следующим образом:

введите описание изображения здесь

- EDIT новой версии углового кли ведет себя по-разному. 1.5.5 не хочет имя файла модуля, поэтому команда с v1.5.5 должна быть

ng g component foo/fooList --module=foo

1
Yay для --moduleаргумента; что документы говорят «Позволяет спецификацию объявляющего модуля.» ; Я хотел бы добавить, --moduleуказывает, какой существующий модуль должен быть изменен, чтобы импортировать модуль, который вы собираетесь создать
The Red Pea

2
@TheRedPea Я полагаю, вы хотели сказать: «--module указывает, какой существующий модуль должен быть изменен для импорта компонента, которым вы являетесь ...»
cobolstinks

Да, вы правы! Существующий модуль изменен со ссылкой на новый компонент
The Red Pea

13

Вы можете попробовать ниже команду, которая описывает,

ng -> Angular 
g  -> Generate
c  -> Component
-m -> Module 

Тогда ваша команда будет выглядеть так:

ng g c user/userComponent -m user.module

9

Для Angular v4 и выше просто используйте:

ng g c componentName -m ModuleName

1
Выдает ошибку, Specified module does not existтогда как модуль существовал
Pardeep Jain

1
Вы не указываете имя модуля, вы указываете имя файла модуля.
Роджер

1
Работает как шарм! например, если ваш файл модуля user-settings.module.tsи вы хотите добавить компонент, public-infoто команда будет:ng g c PublicInfo -m user-settings
Spiral Out

1
Это самый простой и чистый ответ!
Барна Тексе

8

вот что сработало для меня:

1 -->  ng g module new-module

2 -->  ng g c new-module/component-test --module=new-module/new-module.module.ts

Если вы хотите создать компонент без его каталога, используйте --flat флаг.


не нужно писать .ts
Лапенков Владимир

--module = путь к модулю сработал со мной, спасибо @Mohamed Makkaoui
Ян Постон Фрэмер

8
  1. Сначала вы генерируете модуль, выполняя.
ng g m modules/media

это сгенерирует модуль с именем mediaвнутри modulesпапки.

  1. Во-вторых, вы создаете компонент, добавленный в этот модуль
ng g c modules/media/picPick --module=modules/media/media.module.ts

первая часть команды ng g c modules/media/picPickсгенерирует папку компонентов, которая называется picPickвнутри modules/mediaпапки, в которой находится наш новый mediaмодуль.

вторая часть сделает наш новый picPickкомпонент объявленным в mediaмодуле, импортировав его в файл модуля и добавив его в declarationsмассив этого модуля.

рабочее дерево

введите описание изображения здесь


2
Можете ли вы объяснить, как это отвечает на вопрос?
Стерлинг Арчер

Спасибо за ваше примечание, я отредактировал свой ответ, поскольку я будущий читатель @CertainPerformance
Elhakim

3

Перейти на уровень модуля / мы также можем быть в корневом уровне и введите ниже команды

ng g component "path to your component"/NEW_COMPONENT_NAME -m "MODULE_NAME"

Пример :

ng g component common/signup/payment-processing/OnlinePayment -m pre-login.module

3

Первый модуль генерации:

ng g m moduleName --routing

Это создаст папку moduleName, затем перейдите к папке модуля

cd moduleName

И после этого сгенерировать компонент:

ng g c componentName --module=moduleName.module.ts --flat

Используйте --flat, чтобы не создавать дочернюю папку внутри папки модуля


1

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

'ng generate component newCompName --module= specify name of module'

1

Используйте эту простую команду:

ng g c users/userlist

users: Название вашего модуля.

userlist: Имя вашего компонента.


1

Согласно Angular Docs способ создать компонент для конкретного модуля,

ng g component <directory name>/<component name>

"имя каталога" = где CLI сгенерировал функциональный модуль

Пример :-

ng generate component customer-dashboard/CustomerDashboard

В результате создается папка для нового компонента в папке на панели пользователя и обновляется функциональный модуль с помощью CustomerDashboardComponent.



1

Я создал компонентный дочерний модуль с определенной корневой папкой

Эта команда ниже я указал, пожалуйста, проверьте

ng g c Repair/RepairHome -m Repair/repair.module

Ремонт - это корневая папка нашего дочернего модуля

-m это --module

с для compount

г для генерации


1

Я столкнулся с этой проблемой сегодня во время работы над приложением Angular 9. Я получаю сообщение «ошибка модуля не существует» всякий раз, когда я добавляю .module.tsили .moduleк имени модуля. Кли нужно только имя модуля без расширения. Предполагая, что у меня есть имя модуля:, brands.module.tsкоманда, которую я использовал, была

ng g c path/to/my/components/brands-component -m brands --dry-run

удалите, как --dry-runтолько вы подтвердили правильность структуры файла.



1

Распространенным шаблоном является создание объекта с маршрутом, отложенным модулем и компонентом.

Маршрут: myapp.com/feature

приложение-routing.module.ts

{ path: 'feature', loadChildren: () => import('./my-feature/my-feature.module').then(m => m.MyFeatureModule) },

Структура файла:

app   
└───my-feature
      my-feature-routing.module.ts
      my-feature.component.html
      my-feature.component.css
      my-feature.component.spec.ts
      my-feature.component.ts
      my-feature.module.ts

Все это может быть сделано в кли с:

ng generate module my-feature --module app.module --route feature

Или короче

ng g m my-feature --module app.module --route feature

Или, если вы не укажете имя, cli спросит вас об этом. Очень полезно, когда вам нужно создать несколько функций

ng g m --module app.module --route feature

0

Добавьте компонент в приложение Angular 4 с помощью Angular CLI

Чтобы добавить новый компонент Angular 4 в приложение, используйте команду ng g component componentName. После выполнения этой команды Angular CLI добавляет папку component-nameв src\app. Также ссылки того же самого добавляются в src\app\app.module.tsфайл автоматически.

Компонент должен иметь функцию @Componentдекоратора, за classкоторой следует exportредактор. Функция @Componentдекоратора принимает метаданные.

Добавьте компонент в определенную папку приложения Angular 4 с помощью Angular CLI

Чтобы добавить новый компонент в определенную папку, используйте команду ng g component folderName/componentName


0

Если у вас есть несколько приложений, объявленных в .angular-cli.json (например, в случае работы с функциональным модулем)

"apps": [{
    "name": "app-name",
    "root": "lib",
    "appRoot": ""
}, {...} ]

Ты можешь :

ng g c my-comp -a app-name

-a означает --app (имя)


0

Я использую эту конкретную команду для генерации компонентов внутри модуля.

ng g c <module-directory-name>/<component-name>

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

cd <module-directory-name>

а затем создать компонент.

ng g c <component-name>

Примечание: код, заключенный в <>, представляет специфичные для пользователя имена.


0

1.- Создайте свой функциональный модуль как обычно.

ng generate module dirlevel1/module-name

2.- Вы можете указать ПУТЬ КОРНЯ вашего проекта в --module (только в корнях --module, (/) указывает на корень вашего ПРОЕКТА, а НЕ СИСТЕМНЫЙ КОРЕНЬ !!! )

ng generate component dirlevel1/component-name --module /src/app/dirlevel1/module-name.module.ts

Реальный пример:

ng generate module stripe/payment-methods-list
ng generate component stripe/payment-methods-list --module=/src/app/stripe/payment-methods-list/payment-methods-list.module.ts 

Вывод:

CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.scss (0 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.html (39 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.spec.ts (768 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.ts (322 bytes)
UPDATE src/app/stripe/payment-methods-list/payment-methods-list.module.ts (311 bytes)
[OK] Generated component!

Протестировано с Angular CLI: 9.1.4


0

Сделать модуль, сервис и компонент в конкретном модуле

Basic:

    ng g module chat     
    ng g service chat/chat -m chat
    ng g component chat/chat-dialog -m chat

    In chat.module.ts:
        exports: [ChatDialogComponent],
        providers: [ChatService]

    In app.module.ts:

        imports: [
            BrowserModule,
            ChatModule
        ]

    Now in app.component.html:
        <chat-dialog></chat-dialog>


LAZY LOADING:
    ng g module pages --module app.module --route pages

        CREATE src/app/pages/pages-routing.module.ts (340 bytes)
        CREATE src/app/pages/pages.module.ts (342 bytes)
        CREATE src/app/pages/pages.component.css (0 bytes)
        CREATE src/app/pages/pages.component.html (20 bytes)
        CREATE src/app/pages/pages.component.spec.ts (621 bytes)
        CREATE src/app/pages/pages.component.ts (271 bytes)
        UPDATE src/app/app-routing.module.ts (8611 bytes)       

    ng g module pages/forms --module pages/pages.module --route forms

        CREATE src/app/forms/forms-routing.module.ts (340 bytes)
        CREATE src/app/forms/forms.module.ts (342 bytes)
        CREATE src/app/forms/forms.component.css (0 bytes)
        CREATE src/app/forms/forms.component.html (20 bytes)
        CREATE src/app/forms/forms.component.spec.ts (621 bytes)
        CREATE src/app/forms/forms.component.ts (271 bytes)
        UPDATE src/app/pages/pages-routing.module.ts (437 bytes)
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.