使用Angular-CLI为特定模块创建组件

Question

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

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

例如: ng g module newModule

ng g component newComponent (如何将此组件添加到newModule ??)

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

Answer 1

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

1. ng g module newModule 生成一个模块,
2. cd newModule将目录更改为该newModule文件夹
3. 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将支持模块和组件,如下所示:

--EDIT新版本的角度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

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

1. 如果我们需要生成组件，则移动到特定文件夹

   cd <component-path>

2. 调用下面的生成命令

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

例子

 `ng g c login --module= app`

Answer 9

首先生成模块：

ng g m moduleName --routing

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

cd moduleName

然后生成组件：

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

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

Answer 10

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 11

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到此模块的数组中，来在模块中声明我们的新组件。

Answer 12

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 13

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

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