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

Posted 2023-02-22

【中文标题】使用 Angular-CLI 创建组件并将其添加到特定模块

【英文标题】：Create component & add it to a specific module with Angular-CLI

【发布时间】：2017-03-31 16:39:43

【问题描述】：

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

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

例如：ng g module newModule

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

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

【参考方案1】：

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

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

更新：Angular 9

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

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

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

【讨论】：

您也可以留在项目根目录，并在组件前加上模块名称ng g component moduleName/componentName。

使用 Angular CLI 1.6.8 版时，当我指定现有模块时，我总是收到错误提示“指定的模块不存在”。当我尝试以下命令时它起作用了：ng generate service service1 --module=module1/module1.module.ts。注意：我的服务名称是service1，我的模块名称是module1

这将在指定目录中创建一个新组件，但不会在模块中注册它。它将在 app.module 中注册它。您需要使用 --module 选项指定模块，例如：ng g component <your component> --module=<your module name>

已于 10 月 6 日过期，Angular 6

过时了。 Angular 6 不依赖文件夹结构来查看组件在哪个模块中。两个模块可以在同一个目录中。 @daniel 的回答 ***.com/a/44812014/511719 适用于 Angular 6。

【参考方案2】：

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

【讨论】：

其他答案有效，但这是最有效的。值得在末尾添加--dry-run，看看会受到什么影响，这是一个很好的健全性检查

ng g component path/to/myComponent --module=app.module.ts --dry-run 是一个非常有用的命令；只是为了确保您的组件是在正确的目录中创建的。

可以在module选项中使用相对路径，如下ng g component componentName --module=../../sibling/path/custom.module.ts --dry-run

ng g c newComponent --module app 也可以。我在终端中使用了它，而不是在与 app.module.ts 文件相同的目录中，它把它放在正确的模块中

【参考方案3】：

不确定 Alexander Ciesielski 的回答在撰写本文时是否正确，但我可以验证这不再有效。运行 Angular CLI 的项目中的哪个目录都没有关系。如果你输入

ng g component newComponent

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

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

ng g component moduleName/newComponent

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

【讨论】：

当时对我来说是正确的答案。它可以正常工作。我创建了一个拉取请求以将此信息添加到文档中。其中一位贡献者要求我删除 cd-ing 部分..最后将是 1.ng g module newModule 2.ng g component new-module/newComponent 根据他应该是 new-module 而不是 newModule

只是指出，使用 Alexander Ciesielski 的技术并按预期工作。我应该注意，我不需要创建只需要创建文件夹的组件。所以我只是 mkdir 一个文件夹，然后在新创建的文件夹中运行 n g component newComponent。

我想说完整的答案是ng g component moduleName/newComponent -m moduleName

在我的情况下，组件名称与模块名称相同，因此我使用ng generate module modComName 创建了模块 1) 创建了文件夹 2) 在同名文件夹中创建了一个模块文件；命令ng generate component modComName 实际上1）在同名文件夹中创建了一个组件文件2）修改了模块以导入组件

创建模块并将其导入基础模块时要小心； ng 将导入添加到数组的end；但你可能想要："The order of the routes in the configuration matters and this is by design."

【参考方案4】：

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

要创建模块，请运行：

ng g module foo

要在 foo 模块文件夹中创建组件并将其添加到 foo.module.ts 的声明集合中，请运行以下命令：

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

【讨论】：

欢迎 --module 参数； docs 说“允许声明模块的规范”。 ;我会添加--module 指定应该修改哪个现有模块来导入你即将创建的模块

@TheRedPea 我相信你的意思是说“--module 指定应该修改哪个现有模块以导入你的组件......”

是的，你是对的！参考新的 component

修改了现有模块

【参考方案5】：

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

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

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

ng g c user/userComponent -m user.module

【讨论】：

这适用于 angular 12，在.module 之后不需要.ts，所以这是完美的。正如托尼所提到的，值得在最后添加--dry-run，看看会受到什么影响，这是一个很好的健全性检查

【参考方案6】：

这对我有用：

1 -->  ng g module new-module

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

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

【讨论】：

不需要写.ts

--module=path-to-module 对我有用，谢谢@Mohamed Makkaoui

【参考方案7】：

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

ng g c componentName -m ModuleName

【讨论】：

在模块存在时抛出错误Specified module does not exist

你不指定模块的名字，你指定模块的文件名。

像魅力一样工作！例如如果您的模块文件是user-settings.module.ts，并且您想添加一个组件public-info，那么命令将是：ng g c PublicInfo -m user-settings

这是最简单最干净的答案！

【参考方案8】：

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

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 模块中声明它。

【讨论】：

您能否详细解释一下这是如何回答问题的？

感谢您的留言，我编辑了我的答案，因为我是未来的读者@CertainPerformance

【参考方案9】：

首先生成模块：

ng g m moduleName --routing

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

cd moduleName

然后生成组件：

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

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

【参考方案10】：

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

【参考方案11】：

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

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

【参考方案12】：

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

如果我们需要生成组件，请移至特定文件夹

cd <component-path>

调用下面的生成命令

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

示例

 `ng g c login --module= app`

【参考方案13】：

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 & 你应该很高兴。

【参考方案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

【参考方案15】：

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

要归档此类，您必须将该 component-module 的路由添加到某处并指定路由名称。

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

【参考方案16】：

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

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

【参考方案17】：

使用这个简单的命令：

ng g c users/userlist

users：你的模块名称。

userlist：您的组件名称。

【参考方案18】：

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

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

你可以：

ng g c my-comp -a app-name

-a 代表--app（名称）

【参考方案19】：

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

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

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

示例：-

ng generate component customer-dashboard/CustomerDashboard

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

【参考方案20】：

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

【参考方案21】：

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

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

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

Repair是我们子模块的根文件夹

-m 是--模块

c 表示成分

g 生成

【参考方案22】：

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

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

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

【参考方案23】：

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

【参考方案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)

【参考方案25】：

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

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

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。

【参考方案26】：

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

ng g module newModule

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

cd command  
cd newModule

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

ng g component newComponent

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

【参考方案27】：

使用 Angular CLI 向 Angular 4 应用添加组件

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

一个组件应该有一个@Component 装饰器函数，后跟一个class，它需要是exported。 @Component 装饰器函数接受元数据。

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

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

【参考方案28】：

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

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

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

cd <module-directory-name>

然后创建组件。

ng g c <component-name>

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

【参考方案29】：

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

【参考方案30】：

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

@NgModule(
    declarations: [

    FileManagerDetailsComponent <---this is ur page component