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

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

Чи є спосіб створити компонент для нового модуля?

наприклад: ng g module newModule

ng g component newComponent (як додати цей компонент до newModule ??)

оскільки поведінка за замовчуванням у кутовій клітці - це помістити все нові компоненти всередину app.module. Я хотів би вибрати, де буде мій компонент, щоб я міг створювати окремі модулі і не мати всіх моїх компонентів всередині app.module. Це можна зробити, використовуючи кутовий кліп або мені це потрібно зробити вручну?

Щоб створити компонент як частину модуля, слід

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

ОНОВЛЕННЯ: Кутова 9

Тепер не має значення, в якій папці ви знаходитесь, коли генеруєте компонент.

1. ng g module NewMoudle для генерації модуля.
2. ng g component new-module/new-component створити NewComponent.

Примітка: Коли Angular CLI бачить новий модуль / new-компонент, він розуміє і переводить корпус у відповідність new-module -> NewModule та new-компонент -> 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

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

Щоб створити модуль, виконайте наступне:

ng g module foo

Щоб створити компонент всередині папки модуля foo та додати його до колекції декларацій foo.module.ts, запустіть це:

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

І кліп вибудує модуль і компонент так:

--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: Назва вашого компонента.

Згідно з кутовими документами способом створення компонента для конкретного модуля є:

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

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

Команду cli нижче, яку я вказав, будь ласка, перевірте

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

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

-m є --модуль

c для рахунку

г для генерування

Я зіткнувся з цим питанням сьогодні, будуючи ліси програми Angular 9. Я отримував "модуль не існує помилки" кожного разу, коли я додав до .module.tsабо .moduleім'я модуля. Для кліпу потрібна лише назва модуля без розширення. Припустимо, що у мене було ім'я модуля:, brands.module.tsя використовувала команду

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

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

Поширений зразок - це створити функцію за допомогою маршруту, ледачого завантаженого модуля та компонента.

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

app-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

Або якщо ви не залишите ім'я, кліп підкаже вам про це. Дуже корисно, коли потрібно створити кілька функцій

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!

Перевірено за допомогою кутового CLI: 9.1.4

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

Зробіть модуль, сервіс та компонент, зокрема модуль

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)