Angular CLI创建Angular 5自定义模块后如何自动填充路由数组？

Great question! When you run ng generate module xyz --routing to create a module with a separate routing file, Angular CLI defaults to an empty routes array in xyz-routing.module.ts—but there are several practical ways to auto-populate this array instead of doing it manually every time. Here are your best options:

1. Use the --route CLI Parameter (Quickest Built-In Solution) #

The easiest way to get a pre-filled routes array is to combine the module generation with a route definition in the same command. This tells Angular CLI to generate a default component for your module and automatically wire it up in the routing file.

Run this command:

ng generate module xyz --routing --route /xyz --module app.module

What this does: #

• Creates xyz.module.ts and xyz-routing.module.ts
• Generates a default XyzComponent (in the xyz folder)
• Populates xyz-routing.module.ts with a basic route rule:

  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { XyzComponent } from './xyz.component';
  
  const routes: Routes = [
    { path: '', component: XyzComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class XyzRoutingModule { }
  

If you want to use a custom component name instead of the default, add the --component flag:

ng generate module xyz --routing --route /xyz --module app.module --component my-custom-component

2. Create Custom Angular CLI Schematics Templates #

If you regularly need a specific routing structure (like pre-defined child routes, guards, or lazy loading setups), you can customize the CLI's default template for routing modules.

Steps to set this up: #

1. Locate the default routing module template in your project's node_modules folder:
   node_modules/@schematics/angular/module/files/__routingModule__.ts.template
2. Copy this file to a custom folder in your project (e.g., tools/schematics/templates/routing-module.ts.template)
3. Modify the template to include your preferred routes structure. For example, a template with pre-configured child routes might look like:

   import { NgModule } from '@angular/core';
   import { Routes, RouterModule } from '@angular/router';
   import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';
   
   const routes: Routes = [
     {
       path: '',
       component: <%= classify(name) %>Component,
       children: [
         // Pre-defined child route template (uncomment and adjust as needed)
         // { path: 'details', component: <%= classify(name) %>DetailsComponent },
         // { path: 'edit', component: <%= classify(name) %>EditComponent }
       ]
     }
   ];
   
   @NgModule({
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule]
   })
   export class <%= classify(name) %>RoutingModule { }
   

4. Use the --collection flag when generating modules to point to your custom schematics setup (or publish your schematics as a npm package for broader use).

3. Editor Code Snippets (Fast Manual Shortcut) #

If you don't want to tweak CLI schematics, create a code snippet in your editor (like VS Code) to quickly populate the routes array after generating the module.

For example, in VS Code, add this snippet to your typescript.json user snippets:

{
  "Angular Module Route": {
    "prefix": "ng-route",
    "body": [
      "const routes: Routes = [",
      "  { path: '', component: ${1:ComponentName} }",
      "];",
      ""
    ],
    "description": "Populate Angular module routes array"
  }
}

Now, after generating your module and component, just type ng-route in the routing file and replace ${1:ComponentName} with your actual component name.

内容的提问来源于stack exchange，提问作者Roham Tehrani