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

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

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

更新：角 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中的名称与模块和组件的文件夹名称相匹配。

---

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 将像这样搭建模块和组件：

https://i.stack.imgur.com/VOO37.png

--EDIT 新版本的 angular 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 标志。

---

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

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 模块。

第二部分将通过在模块文件中导入新的 picPick 组件并将其附加到此模块的 declarations 数组中，从而在 media 模块中声明我们的新 picPick 组件。

https://i.stack.imgur.com/Xxpel.png

https://i.stack.imgur.com/zyxKK.png

---

首先生成模块：

ng g m moduleName --routing

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

cd moduleName

然后生成组件：

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

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

---

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

应用程序路由.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 8.3 版中使用了以下命令，它通过生成在特定模块中声明的特定组件来工作。

移动到我们需要生成组件的特定文件夹 cd 调用下面的生成命令 ng gc --module=

例子

 `ng g c login --module= app`

---

TL;DR 试试这个。通过模块的文件名（不包括 .ts 扩展名）指定模块名称 ng gc components/path-to-a-folder/component-name --module=app.module

笔记：

ng gc 是 ng generate 组件的缩写

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

---

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

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

---

1.- 像往常一样创建您的功能模块。

ng generate module dirlevel1/module-name

2.-您可以在--module中指定项目的ROOT PATH（仅在--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

---

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

要存档此类，您必须将该组件模块的路由添加到某处并指定路由名称。

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

---

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

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

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。

---

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

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

---

使用这个简单的命令：

ng g c users/userlist

users：您的模块名称。

userlist：您的组件名称。

---

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

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

你可以 ：

ng g c my-comp -a app-name

-a 代表--app（名称）

---

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

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

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

例子 ：-

ng generate component customer-dashboard/CustomerDashboard

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

---

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

---

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

我指定了下面的那个cli命令，请检查

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

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

-m 是 --module c 用于生成的组件 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。

---

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

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)

---

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

ng g module newModule

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

cd command  
cd newModule

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

ng g component newComponent

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

---

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

---

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

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

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

cd <module-directory-name>

然后创建组件。

ng g c <component-name>

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

---

您可以使用 ng generate module 生成模块。然后使用此命令生成与该模块相关的组件， ng generate component --module=

---

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

@NgModule({
    declarations: [

    FileManagerDetailsComponent <---this is ur page component

---