Angular 16.1：能否修改ng generate component的.ts模板及生成文件？

是否存在对应.ts模板文件？ #

Angular CLI 确实为 ng generate component 内置了包括.ts在内的组件模板文件。这些模板默认存储在 Angular CLI 的全局安装目录中，但不建议直接修改内置文件——因为升级 CLI 时会被覆盖。更可靠的方式是通过本地自定义模板或自定义 schematic 来修改生成内容。

如何修改命令生成的内容？ #

有两种常用方案：

1. 使用本地自定义模板 #

• 在项目根目录创建.schematics文件夹，在其中构建组件模板结构，比如：

  .schematics/
    component/
      files/
        __name@dasherize__.component.ts
  

• 编写自定义的.ts模板内容，示例：

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-{{name}}',
    templateUrl: './{{name}}.component.html',
    styleUrls: ['./{{name}}.component.scss']
  })
  export class {{pascalCase name}}Component implements OnInit {
    constructor() { }
  
    ngOnInit(): void {
      // 自定义初始化逻辑
    }
  }
  

• 在angular.json的schematics字段中配置使用本地模板：

  {
    "schematics": {
      "@schematics/angular:component": {
        "template": "./.schematics/component/files/__name@dasherize__.component.ts"
      }
    }
  }
  

2. 创建自定义 Schematic（更灵活） #

如果需要复杂的生成逻辑，可自定义 schematic：

• 安装 schematic 工具：npm install -g @angular-devkit/schematics-cli
• 创建新的 schematic 项目：schematics blank --name=my-component-schematic
• 在项目的files目录下修改模板文件，编写自定义生成逻辑
• 将 schematic 作为本地依赖引入项目，或发布到 npm，然后在angular.json中配置替代默认的@schematics/angular:component

注意事项 #

• 模板中的{{name}}、{{pascalCase name}}是 Angular CLI 的模板变量，用于动态替换生成的组件名称等内容
• 优先使用本地模板或自定义 schematic，避免修改 CLI 内置文件导致升级后配置丢失

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