创建组件&用Angular-CLI把它添加到特定的模块中

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

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

更新:Angular 9

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

1. ng g module NewModule生成一个模块。
2. ng g component new-module/new-component来创建NewComponent。

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

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

ng g component newComponent

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

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

ng g component moduleName/newComponent

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

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

我没有找到一个答案，说明如何使用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

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

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

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

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

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

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

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

这对我来说很管用:

1 -->  ng g module new-module


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

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

使用这个简单的命令:

ng g c users/userlist

users:你的模块名。

userlist:你的组件名。

对于Angular v4及以上版本，只需使用:

ng g c componentName -m ModuleName

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

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

你可以:

ng g c my-comp -a app-name

-a代表——app (name)

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

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

然后你的命令会像这样:

ng g c user/userComponent -m user.module

根据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

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

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

该命令将在模块本地生成组件。 或者你可以先输入。

cd <module-directory-name>

然后创建组件。

ng g c <component-name>

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

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

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

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

修复是子模块的根文件夹

-m是——module

C代表复合

G代表生成

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

ng g m modules/media

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

2. 其次，生成添加到该模块的组件

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

转到模块级/我们也可以在根级输入下面的命令

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

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

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

一旦你确认文件结构是正确的，删除--dry-run。

第一个生成模块:

ng g m moduleName --routing

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

cd moduleName

然后生成组件:

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

使用——flat表示不在模块文件夹中创建子文件夹

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

ng generate module dirlevel1/module-name

2.-你可以在——模块中指定项目的根路径(仅在——模块中，(/)根指向你的项目根和不是系统根!!)

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

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

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

在特定的模块中创建模块、服务和组件

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)

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

为了存档，你必须将component-module的路由添加到某个地方，并指定路由名。

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

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

< p > 博士TL; < br > 试试这个。通过模块的文件名(不包括.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 &你应该可以走了。

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

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

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)

如果你不想要路由，你可以删除。

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

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

   cd <component-path>

2. 调用下面的generate命令

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

例子

 `ng g c login --module= app`

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

ng g module newModule

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

cd command
cd newModule

现在你可以继续使用下面的命令:

ng g component newComponent

这个组件会在那个模块中创建。

如果你已经创建了你的组件而没有指向一个模块，你可以通过将它添加到声明中来直接将它添加到你的应用模块中

@NgModule({
declarations: [


FileManagerDetailsComponent <---this is ur page component

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

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

这将在同一个目录中创建一个模块和组件，默认情况下，组件将被添加到closed模块中

——module=moduleName . ng c moduleFolderName/componentName

然后在共享模块中创建头组件

ng g c shared/header --module=shared

这应该可以工作:

• ng g c shared/components/info-card --module=/src/app/shared/shared.module.ts

注:

1. ng g c等价于ng generate component
2. shared/components/info-card在我的项目的src/app中 目录,这就是我如何使用它来创建一个组件 在共享/components目录中输入InfoCardComponent (没有指定src/app).
但是，要将这个新创建的组件添加到特定的模块，您可以
. bb0 需要在模块的路径中包含/src/app，否则 它会说这个模块不存在

Angular 13+ cli

我在模块文件夹下有多个模块

ng g c components/shared/newlayout -m modules/Shared