如何通过Angular CLI生成单文件组件？无命令时如何配置？

当需要体积极小的Angular组件时，单文件组件是最佳选择，比如下面这个错误提示组件：

@Component({
  selector: 'app-errors',
  template: `<div class="alert-error">{{ errorMessage }}</div>`,
  styles: [
    `
    .alert-error {
      color: #721c24;
      background-color: #f8d7da;
      border-color: #f5c6cb;
      padding: 0.75rem 1.25rem;
      margin-bottom: 1rem;
      text-align: center;
      border: 1px solid transparent;
      border-radius: 0.25rem;
    }
    `,
  ],
})
export class ErrorsComponent {}

针对你提出的问题，解答如下：

1. 是否存在可直接生成单文件组件的Angular CLI命令？ #

Angular CLI没有原生的单文件组件生成命令，但可以通过参数组合实现直接生成单文件组件的效果。

2. 若不存在该命令，能否配置Angular CLI实现此功能？具体如何配置？ #

可以通过两种方式实现：

方式一：生成组件时添加参数 #

直接在ng g c命令后添加三个参数，就能一步生成单文件组件：

ng g c error-alert --inline-template --inline-style --flat

参数说明：

• --inline-template（缩写-t）：将模板内容嵌入组件类的template属性
• --inline-style（缩写-s）：将样式内容嵌入组件类的styles属性
• --flat：不在单独目录中生成组件文件，直接输出到当前目录

这样生成的组件就是单文件形式，无需手动删除多余文件或移动目录。

方式二：修改项目配置，默认启用单文件生成 #

修改项目根目录下的angular.json文件，找到对应项目的schematics节点，添加如下配置：

"schematics": {
  "@schematics/angular:component": {
    "inlineTemplate": true,
    "inlineStyle": true,
    "flat": true
  }
}

配置完成后，后续执行ng g c 组件名时，会默认生成单文件组件，无需每次手动添加参数。

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