编译Angular组件：如何将HTML模板内容打包进JS文件中

默认Angular不会把组件的独立HTML文件输出到dist，需要修改构建配置：

• 打开项目根目录下的angular.json，定位到你的项目对应的配置节点：projects > [你的项目名] > architect > build > options
• 在options下新增配置项："extractTemplates": true
• 保存配置后重新执行ng build，即可在dist目录下看到所有组件对应的独立HTML文件
  注意：开启该配置后，模板不会再内嵌到JS文件中，应用运行时会主动请求对应的HTML模板，会产生额外的网络请求，生产环境不推荐开启

这个是Angular CLI的默认行为，如果你当前构建没有生效，按以下步骤排查配置：

• 确认angular.json的build配置下，extractTemplates的取值为false，如果之前设为了true，改回false即可恢复模板内嵌逻辑
• 确认开启了AOT编译：Angular的AOT编译器会直接把HTML模板编译为可执行的JS渲染函数，内嵌到组件对应的JS文件中。Angular 12默认生产构建已经开启AOT，你也可以在build的options里主动加"aot": true强制开启，或者构建时执行ng build --aot
• Ionic项目不需要额外修改专属配置，只要没有手动修改过Angular的模板处理规则，默认构建产物就已经把HTML编译进JS了，不需要额外接入webpack配置

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