使用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

不确定在撰写本文时Alexander Ciesielski的答案是否正确，但我可以证实这不再起作用。运行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会像下面这样搭建模块和组件：

-编辑新版本的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

对于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文件夹，然后导航到module文件夹

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文档，为特定模块创建组件的方法是：

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

“目录名称” = CLI在其中生成功能模块的位置

例子：-

ng generate component customer-dashboard/CustomerDashboard

这将在customer-dashboard文件夹中为新组件生成一个文件夹，并使用CustomerDashboardboardComponent更新功能模块。

首先运行ng g module newModule 。然后跑ng g component newModule/newModule --flat

我使用特定的根文件夹创建了基于组件的子模块

我在下面指定的cli命令，请签出

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

修复是我们子模块的根文件夹

-m是--module

c for compount

g生成

我今天在搭建Angular 9应用程序时遇到了这个问题。每当在.module.ts或.module上添加模块名称时，我都会收到“模块不存在错误” 。cli只需要模块名称，没有扩展名。假设我有一个模块名称：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

可以使用以下方法在cli中完成所有操作：

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 CLI将组件添加到Angular 4应用

要将新的Angular 4组件添加到应用程序，请使用command ng g component componentName。执行此命令后，Angular CLI component-name在下添加一个文件夹src\app。同样，相同的引用也会src\app\app.module.ts自动添加到文件中。

组件应具有@Component装饰器功能，后跟class需要装饰的功能export。的@Component装饰函数接受的元数据。

使用Angular CLI将组件添加到Angular 4应用程序的特定文件夹

要将新组件添加到特定文件夹，请使用以下命令 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中指定项目的ROOT PATH（仅在--module中，（/）根指向您的PROJECT ROOT，而 不是SYSTEM ROOT !!!）

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

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)