Ответ 1
Чтобы создать компонент как часть модуля, вы должны
-
ng g module newModule
для создания модуля, -
cd newModule
, чтобы сменить каталог в папкуnewModule
-
ng g component newComponent
, чтобы создать компонент как дочерний модуль модуля.
Я начинаю использовать angular -cli, и я уже много читал, чтобы найти ответ о том, что я хочу сделать... нет успеха, поэтому я пришел сюда.
Есть ли способ создать компонент для нового модуля?
например: ng g module newModule
ng g component newComponent
(как добавить этот компонент в newModule?)
поскольку поведение angular -cli по умолчанию заключается в том, чтобы поместить все новые компоненты внутри app.module
. Я хотел бы выбрать, где будет мой компонент, чтобы я мог создавать отдельные модули и не иметь всех моих компонентов внутри app.module
. Это можно сделать с помощью angular -cli или мне нужно сделать это вручную?
Чтобы создать компонент как часть модуля, вы должны
ng g module newModule
для создания модуля,cd newModule
, чтобы сменить каталог в папку newModule
ng g component newComponent
, чтобы создать компонент как дочерний модуль модуля.ng g component nameComponent --module=app.module.ts
Не уверен, что, возможно, ответ Александра Цесельского был правильным на момент написания, но я могу проверить, что это больше не работает. Неважно, какой каталог в проекте вы запускаете CLI Angular. Если вы наберете
ng g component newComponent
он сгенерирует компонент и импортирует его в файл app.module.ts
Единственный способ использования CLI для автоматического импорта в другой модуль - это указать
ng g component moduleName/newComponent
где moduleName - это модуль, который вы уже определили в своем проекте. Если moduleName не существует, он поместит компонент в каталог moduleName/newComponent, но все же импортирует его в app.module
Я не нашел ответа, который показал бы, как использовать cli для генерации компонента в папке модуля верхнего уровня, а также чтобы компонент автоматически добавил коллекцию объявлений модуля.
Для создания модуля запустите это:
ng g module foo
Чтобы создать компонент в папке модуля foo и добавить его в коллекцию объявлений foo.module.ts, выполните следующее:
ng g component foo/fooList --module=foo.module.ts
И Cli вырежет модуль и компонент следующим образом:
--EDIT новая версия угловой Cli ведет себя по-разному. 1.5.5 не хочет имя файла модуля, поэтому команда с v1.5.5 должна быть
ng g component foo/fooList --module=foo
Вы можете попробовать ниже команду, которая описывает,
ng -> Angular
g -> Generate
c -> Component
-m -> Module
Тогда ваша команда будет выглядеть так:
ng g c user/userComponent -m user.module
это то, что сработало для меня:
1 --> ng g module new-module
2 --> ng g c new-module/component-test --module=new-module/new-module.module.ts
Если вы хотите сгенерировать компонент без его каталога, используйте флаг --flat
.
Для Angular v4 и выше просто используйте:
ng g c componentName -m ModuleName
Используйте эту простую команду:
ng g c users/userlist
users
: название вашего модуля.
userlist
: имя вашего компонента.
Согласно Angular Docs способ создать компонент для конкретного модуля,
ng g component <directory name>/<component name>
"имя каталога" = где CLI сгенерировал функциональный модуль
Пример :-
ng generate component customer-dashboard/CustomerDashboard
В результате создается папка для нового компонента в папке на панели пользователя и обновляется модуль компонента с помощью CustomerDashboardComponent.
Я создал компонентный дочерний модуль с определенной корневой папкой
Эта команда Cli ниже я указал, пожалуйста, проверьте
ng g c Repair/RepairHome -m Repair/repair.module
Ремонт - это корневая папка нашего дочернего модуля
-m является - -m odule
с для compount
г для генерации
Добавить компонент в приложение Angular 4 с помощью Angular CLI
Чтобы добавить в приложение новый компонент Angular 4, используйте команду ng g component componentName
. После выполнения этой команды Angular CLI добавляет папку component-name
под src\app
. Кроме того, ссылки на них автоматически добавляются в файл src\app\app.module.ts
.
Компонент должен иметь функцию декоратора @Component
, за которой следует class
, который должен быть export
ed. Функция декоратора @Component
принимает метаданные.
Добавить компонент в определенную папку приложения Angular 4 с помощью Angular CLI
Чтобы добавить новый компонент в определенную папку, используйте команду ng g component folderName/componentName
У меня возникают аналогичные проблемы с несколькими модулями в приложении. Компонент может быть создан для любого модуля, поэтому перед созданием компонента мы должны указать имя конкретного модуля.
'ng generate component newCompName --module= specify name of module'
Если у вас есть несколько приложений, объявленных в .angular-cli.json (например, в случае работы с функциональным модулем)
"apps": [{
"name": "app-name",
"root": "lib",
"appRoot": ""
}, {...} ]
Вы можете:
ng g c my-comp -a app-name
-a расшифровывается как - -a pp (имя)
Сначала запустите ng g module newModule
. Затем запустите ng g component newModule/newModule --flat
В настоящее время я работаю над угловыми 5 проектами и использую эту конкретную команду для генерации компонентов внутри модуля.
ng g c <module-name>/<new-component-name>
Эта команда сгенерирует компонент, локальный для модуля, если вы используете обычную команду, например
ng g c <component-name>
он сгенерирует компонент внутри модуля приложения, известного как корневой модуль.
Примечание: код, заключенный в <>, представляет специфичные для пользователя имена.
ng g m modules/media
это сгенерирует модуль с именем media
внутри папки modules
.
ng g c modules/media/picPick --module=modules/media/media.module.ts
первая часть команды ng gc modules/media/picPick
создаст папку компонентов с именем picPick
внутри папки modules/media
содержит наш новый media
модуль.
вторая часть сделает наш новый компонент picPick
объявленным в media
модуле, импортировав его в файл модуля и добавив его в массив declarations
этого модуля.