如何使用Angular的CLI生成单文件组件？

Question

假设我需要一个非常小的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 {}

为了制作这个组件，我在CLI中运行了ng g c error-alert。然后我删除了CLI生成的所有文件，除了error-alert.ts。然后我将它移出了error-alert目录（我删除了这个目录）。

问题

我希望有一种更简单、更快速的方法来制作单文件组件。

问题

1. 是否有CLI命令可以生成单文件组件？
2. 如果没有这样的命令，我们可以配置CLI使其具备此功能吗？如何实现？

- Razvan Zamfir

Answer 1

你可以尝试添加一些标志，像这样。

> ng generate component <component-name> --inlineTemplate=true --inlineStyle=true --skip-tests=true

这应该停止生成css / html / spec文件。

在更现代的版本中，现在还有一个选项可以对独立组件执行相同的操作。

--standalone

有关使用特定目标生成的更多选项可以在angular CLI文档中找到。

如果您想进一步设置这些标志以默认生成组件，还可以编辑angular.json中的schematics对象。

  "schematics": {
    "@schematics/angular": {
      "component": {
        "inlineTemplate": true
      }
    }
  }

- devDan

Answer 2

你可以添加一个新的配置，使得ng g component只生成一个ts和spec文件。

在angular.json中，在"sematics"属性下添加以下内容：

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

此外，您可以使用扩展来获得CSS和HTML语法高亮显示。这是一个例子 - https://marketplace.visualstudio.com/items?itemName=Angular.ng-template 更深入的教程，关于如何在Angular中创建单文件组件 - https://muhimasri.com/blogs/how-to-create-a-single-file-component-in-angular/

- Muhi