使用 Angular-CLI 创建组件并将其添加到特定模块

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 创建一个组件作为模块的子组件。

更新：Angular 9

现在生成组件时，您在哪个文件夹中并不重要。

ng g module NewModule生成模块。
ng g component new-module/new-component 创建 NewComponent。

注意：当 Angular CLI 看到 new-module/new-component 时，它会理解并转换大小写以匹配 new-module -> NewModule 和 new-component -> NewComponent。一开始可能会让人感到困惑，所以简单的方法是将 #2 中的名称与模块和组件的文件夹名称相匹配。

Answer 2

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

ng g component newComponent

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

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

ng g component moduleName/newComponent

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

Answer 3

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

Answer 4

我没有找到说明如何使用 cli 在顶级模块文件夹中生成组件，以及如何让组件自动添加到模块的声明集合中的答案。

要创建模块运行这个：

ng g module foo

在 foo 模块文件夹中创建组件并将其添加到 foo.module.ts 的声明集合中运行 this:

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

cli 将像这样构建模块和组件：

--编辑新版本的 angular cli 行为不同。 1.5.5 不需要模块文件名，所以 v1.5.5 的命令应该是

ng g component foo/fooList --module=foo

Answer 5

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

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

一个组件应该有一个 @Component 装饰器函数，后面跟着一个需要 export 的 class。 @Component 装饰器函数接受元数据。

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

要将新组件添加到特定文件夹，请使用命令 ng g component folderName/componentName

Answer 6

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

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

Answer 7

这对我有用：

1 -->  ng g module new-module

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

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

Answer 8

使用这个简单的命令：

ng g c users/userlist

users: 你的模块名称。

userlist: 你的组件名称。

Answer 9

对于 Angular v4 及更高版本，只需使用：

ng g c componentName -m ModuleName

Answer 10

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

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

您可以：

ng g c my-comp -a app-name

-a代表--app(名称)

Answer 11

您可以尝试下面的命令，它描述了，

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

那么你的命令将是这样的：

ng g c user/userComponent -m user.module

Answer 12

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

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

"directory name" = CLI 生成功能模块的地方

示例：-

ng generate component customer-dashboard/CustomerDashboard

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

Answer 13

第一个运行ng g module newModule .然后运行ng g component newModule/newModule --flat

Answer 14

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

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

此命令将生成模块本地组件。或者您可以先通过键入更改目录。

cd <module-directory-name>

然后创建组件。

ng g c <component-name>

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

Answer 15

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

下面我指定的cli命令，请查看

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

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

-m is --module

c for compount

g for generate

Answer 16

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

ng g m modules/media

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

其次，你生成一个组件添加到这个模块中

ng g c modules/media/picPick --module=modules/media/media.module.ts

命令 ng g c modules/media/picPick 的第一部分将在 modules/media 文件夹中生成一个名为 picPick 的组件文件夹，其中包含我们新的 media 模块。

第二部分将在 media 模块中声明我们的新 picPick 组件，方法是将其导入模块文件并将其附加到该模块的 declarations 数组。

Answer 17

转到模块 level/we 也可以在根级别并键入以下命令

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

Answer 18

我今天运行在构建 Angular 9 应用程序时遇到了这个问题。每当我将 .module.ts 或 .module 添加到模块名称时，我都会得到 "module does not exist error"。 cli 只需要没有扩展名的模块名称。假设我有一个模块名称：brands.module.ts，我使用的命令是

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

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

Answer 19

首先生成模块：

ng g m moduleName --routing

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

cd moduleName

然后生成组件：

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

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

Answer 20

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

ng generate module dirlevel1/module-name

2.- 您可以在 --module 中指定项目的 ROOT PATH（仅在 --module，(/) root 指向您的 PROJECT ROOT 并且 IS NOT THE 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

Answer 21

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 22

一种常见的模式是使用路由、惰性加载模块和组件创建功能。

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

在特定模块中制作模块、服务和组件

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 24

阅读 --route https://angular.io/cli/generate#module-command,

的描述

要这样归档，你必须把那个component-module的路由添加到某个地方并指定路由名称。

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

Answer 25

您可以使用 ng generate module <module name> 生成 Module。
然后用这个命令生成那个模块相关的组件，ng generate component <component name> --module=<module name>

Answer 26

TL;DR
Try this. Specify the module name by module's file name(excluding the .ts extension)
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 27

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

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

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 28

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

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

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

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

例子

 `ng g c login --module= app`

Answer 29

首先，您必须使用以下命令创建一个新模块：

ng g module newModule

然后，您必须使用以下命令进入该目录：

cd command  
cd newModule

而且，现在您可以使用以下命令继续：

ng g component newComponent

并且该组件将在该模块中创建。

Answer 30

如果您已经在没有指向模块的情况下创建了组件，您可以通过将其添加到声明中来轻松地将其直接添加到您的应用程序模块中

@NgModule({
    declarations: [

    FileManagerDetailsComponent <---this is ur page component

Answer 31

如果需要同时创建组件和模块可以使用命令

ng g m components/my-control && ng g c $_

这将在同一目录中创建一个模块和组件，组件将默认添加到 closes 模块

Answer 32

ng g c moduleFolderName/componentName --module=模块名称

然后在共享模块中创建一个 header 组件

ng g c shared/header --module=shared

使用 Angular-CLI 创建组件并将其添加到特定模块

Create component & add it to a specific module with Angular-CLI

typescript

angular-cli

angular

在特定模块中制作模块、服务和组件

例子