Подтвердить что ты не робот

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

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

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

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

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

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

4b9b3361

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

ng g component newComponent

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

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

ng g component moduleName/newComponent

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

Ответ 4

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

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

ng g module foo

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

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

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

enter image description here

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

ng g component foo/fooList --module=foo

Ответ 5

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

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

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

ng g c user/userComponent -m user.module

Ответ 6

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

1 -->  ng g module new-module

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

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

Ответ 7

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

ng g c componentName -m ModuleName

Ответ 8

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

ng g c users/userlist

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

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

Ответ 9

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

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

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

Пример :-

ng generate component customer-dashboard/CustomerDashboard

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

Ответ 10

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

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

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

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

-m является - -m odule

с для compount

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

Ответ 11

Добавить компонент в приложение 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

Ответ 12

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

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

Ответ 13

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

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

Вы можете:

ng g c my-comp -a app-name

-a расшифровывается как - -a pp (имя)

Ответ 14

Сначала запустите ng g module newModule. Затем запустите ng g component newModule/newModule --flat

Ответ 15

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

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

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

ng g c <component-name>

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

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

Ответ 16

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

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

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

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

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

working tree

enter image description here