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

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

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

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

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

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

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

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 с именами папок для модуля и компонента.

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

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

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 новой версии углового кли ведет себя по-разному. 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

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

ng g c componentName -m ModuleName

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

1 -->  ng g module new-module

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

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

1. Сначала вы генерируете модуль, выполняя.

ng g m modules/media

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

2. Во-вторых, вы создаете компонент, добавленный в этот модуль

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массив этого модуля.

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

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

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

ng g m moduleName --routing

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

cd moduleName

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

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

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

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

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

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

ng g c users/userlist

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

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

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

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

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

Пример :-

ng generate component customer-dashboard/CustomerDashboard

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

Первый запуск ng g module newModule . Тогда бегиng g component newModule/newModule --flat

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

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

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

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

-m это --module

с для compount

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

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

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

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

ng g c componentName --module=path-to-your-module-from-src-folder

пример:

ng g c testComponent --module=/src/app/home/test-component/test-component.module

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

Маршрут: 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

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

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

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

Ты можешь :

ng g c my-comp -a app-name

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

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

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

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

cd <module-directory-name>

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

ng g c <component-name>

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

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

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

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)