Question

我开始使用angular-cli，我已经阅读了很多内容，以便找到关于我想做什么的答案......没有成功，所以我来到这里。

有没有办法为新模块创建组件？

例如：ng g module newModule

ng g component newComponent（如何将此组件添加到newModule？）

因为angular-cli默认行为是将所有新组件放在app.module内。我想选择我的组件的位置，这样我就可以创建单独的模块，并且不会在app.module中包含所有组件。使用angular-cli可以做到这一点，还是我必须手动执行此操作？

Answer 1

要创建组件作为模块的一部分，您应该

ng g module newModule生成模块，
cd newModule将目录更改为newModule文件夹
ng g component newComponent创建组件作为模块的子项。

Answer 2

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

Answer 3

在撰写本文时，不确定Alexander Ciesielski的回答是否正确，但我可以证实这不再有效。运行Angular CLI的项目中的哪个目录并不重要。如果您输入

ng g component newComponent

它将生成一个组件并将其导入app.module.ts文件

使用CLI将其自动导入另一个模块的唯一方法是指定

ng g component moduleName/newComponent

其中moduleName是您已在项目中定义的模块。如果moduleName不存在，它会将组件放在moduleName / newComponent目录中，但仍将其导入app.module

Answer 4

我没有找到答案，显示如何使用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

Answer 5

您可以尝试以下命令，该命令描述了

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

然后您的命令将类似于：

ng g c user/userComponent -m user.module

Answer 6

这对我有用：

1 -->  ng g module new-module

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

如果要生成没有其目录的组件，请使用--flat标志。

Answer 7

对于Angular v4及以上版本，只需使用：

ng g c componentName -m ModuleName

Answer 8

首先生成模块：

ng g m moduleName --routing

这将创建一个moduleName文件夹，然后导航到模块文件夹

cd moduleName

然后生成组件：

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

使用--flat不能在模块文件夹内创建子文件夹

Answer 9

<块引用>

TL;DR
试试这个。通过模块的文件名指定模块名称（不包括.ts扩展名）

ng g c components/path-to-a-folder/component-name --module=app.module

注意事项：

ng g c 是 ng generate component
如果您希望将组件添加到不同的模块中，例如在文件中 collection.module.ts 然后使用 --module=collection.module 而不是 --module=app.module & 你应该很高兴去。

Answer 10

常见的模式是使用路由，延迟加载的模块和组件来创建要素。

路线：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

Answer 11

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

Answer 12

我在 Angular CLI 8.3 版中使用了以下命令，它通过生成在特定模块中声明的特定组件来工作。

移动到我们需要生成组件的特定文件夹

cd <component-path>
调用下面的生成命令

ng g c <component-name> --module=<module-name>

示例

 `ng g c login --module= app`

Answer 13

我今天在搭建Angular 9应用程序时遇到了这个问题。每当在模块名称中添加.module.ts或.module时，都会出现“模块不存在错误”。 cli只需要模块名称，没有扩展名。假设我有一个模块名称：brands.module.ts，那么我使用的命令是

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

在确认文件结构正确后，删除--dry-run。

Answer 14

转到模块级别，然后输入以下命令

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.ts

Answer 15

首先，您通过执行来生成模块。

ng g m modules/media

这将在media文件夹中生成一个名为modules的模块。

第二，您生成一个添加到该模块的组件

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组件。

Answer 16

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

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

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

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

-m是--module

c用于组合

g用于生成

Answer 17

根据Angular文档，为特定模块创建组件的方法是

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

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

示例：-

ng generate component customer-dashboard/CustomerDashboard

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

Answer 18

使用这个简单的命令：

ng g c users/userlist

users：您的模块名称。

userlist：您的组件名称。

Answer 19

我在应用程序中遇到了多个模块的类似问题。可以为任何模块创建组件，因此在创建组件之前，我们必须指定特定模块的名称。

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

Answer 20

我使用此特定命令在模块内部生成组件。

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

此命令将生成模块本地的组件。或您可以先输入以下内容来更改目录。

cd <module-directory-name>

然后创建组件。

ng g c <component-name>

注意：<>中包含的代码表示用户特定的名称。

Answer 21

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

Answer 22

1.-照常创建功能模块。

ng generate module dirlevel1/module-name

2.--您可以在-module （仅在--module，（/）中）指定项目的 ROOT PATH 根指向您的项目根，并且不是系统根！！ ）

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

Answer 23

如果您在.angular-cli.json中声明了多个应用（例如，在处理功能模块时）

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

你可以：

ng g c my-comp -a app-name

-a代表--app（名称）

Answer 24

使模块，服务和组件成为特定的模块

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)

Answer 25

如果您想与模块一起创建，请尝试

  ng generate m module_name --routing &&  ng generate c component_name

Answer 26

阅读--route https://angular.io/cli/generate#module-command的描述，

要进行存档，必须将该 component-module 的路由添加到某处并指定路由名称。

   ng generate module component-name --module=any-parent-module --route=route-path

Answer 27

您可以使用Module来生成ng generate module <module name>。
然后使用此命令生成与该模块ng generate component <component name> --module=<module name>

Answer 28

我不知道这是否是将你们带到这里的原因，但我想创建一个包含模块、路由和组件文件的文件夹。我希望将组件声明到我创建的模块中。

为此，我发现这个命令非常有用。

ng g m path/to/folder/component --routing && ng g c path/to/folder/component

这应该会创建一个包含 6 个文件的文件夹。

CREATE path/to/folder/component/component-routing.module.ts (253 bytes)
CREATE path/to/folder/component/component.module.ts (297 bytes)
CREATE path/to/folder/component/component.component.html (26 bytes)
CREATE path/to/folder/component/component.component.spec.ts (655 bytes)
CREATE path/to/folder/component/component.component.ts (295 bytes)
CREATE path/to/folder/component/component.component.scss (0 bytes)
UPDATE path/to/folder/component/component.module.ts (379 bytes)

如果您不想要路由，可以删除 --routing。

Answer 29

使用Angular CLI将组件添加到Angular 4应用程序

要向应用添加新的Angular 4组件，请使用命令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为特定模块创建组件

29 个答案:

示例

使模块，服务和组件成为特定的模块