如何将Angular多文件组件转换为inline template与inline样式

少量组件手动转换 #

直接修改组件的@Component装饰器配置即可，步骤如下：

• 复制对应.html文件的全部代码，替换装饰器中的templateUrl字段为template，字段值用反引号包裹复制的HTML内容
• 复制对应.css/.scss/.less等样式文件的全部代码，替换装饰器中的styleUrls字段为styles，字段值为包裹了样式代码的反引号数组
• 验证组件编译正常后，即可删除独立的HTML、样式文件

如果后续新建组件需要默认生成内联格式，在ng generate命令后添加参数即可：

# 完整参数写法
ng generate component 组件名 --inline-template --inline-style
# 简写形式
ng g c 组件名 -t -s

大量组件批量转换 #

Angular生态有成熟的第三方工具可以自动完成批量转换，无需手动修改代码：

• 首先在项目开发依赖中安装转换工具：npm install -D ng-inline-component
• 执行批量转换命令，指定目标组件的路径即可：npx ng-inline-component ./src/app/目标组件所在目录

工具会自动读取组件关联的模板、样式文件内容，写入@Component装饰器的对应字段，同时自动删除冗余的独立文件。

注意：如果你的模板/样式文件中存在复杂的路径引用（比如样式的@import、模板的资源相对路径引用），转换后需要验证路径是否正常，避免出现编译错误。

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