Angular 13+ cli

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

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

一种常见的模式是创建带有路由、惰性加载模块和组件的特性。

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

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

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

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

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

Ng路径/to/folder/component—路由路径/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)

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

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

为了存档，您必须将该组件模块的路由添加到某个位置，并指定路由名称。

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

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

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)