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

是否有一种方法可以为新模块创建组件?

例如:ng g module newModule

如何将该组件添加到newModule中??

因为angular-cli的默认行为是把所有新组件放到app.module中。我想选择我的组件将在哪里,这样我就可以创建单独的模块,而不会有我所有的组件在app.module。这是可能的使用angular-cli或我必须手动这样做?


当前回答

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

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数组中。

其他回答

你可以使用ng generate Module <模块名>来生成一个Module。 然后使用此命令生成与该模块相关的组件,ng generate component <组件名称>——module=<模块名称>

不确定Alexander Ciesielski的答案在撰写本文时是否正确,但我可以证实这不再适用。不管你在项目的哪个目录下运行Angular CLI。如果你输入

ng g component newComponent

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

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

ng g component moduleName/newComponent

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

如果你在.angular-cli中声明了多个应用。Json(例如在处理特性模块的情况下)

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

你可以:

ng g c my-comp -a app-name

-a代表——app (name)

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

要创建模块,运行以下命令:

ng g module foo

在foo module文件夹中创建组件,并将其添加到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

1.-像往常一样创建你的特性模块。

ng generate module dirlevel1/module-name

2.-你可以在——module中指定项目的根路径(只有在——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