Angular 的 ng build 默认启用 CSS 关键路径内联优化，会误将 index.php 中的 <?php ?> 视为 HTML 注释前缀并自动注释化；通过禁用 inlineCritical 优化项即可彻底解决。
angular 的 `ng build` 默认启用 css 关键路径内联优化，会误将 `index.php` 中的 `` 视为 html 注释前缀并自动注释化；通过禁用 `inlinecritical` 优化项即可彻底解决。
在混合部署场景中（例如 Angular 前端嵌入传统 PHP CMS），常需保留 index.php 作为构建输出入口，并依赖其中的 PHP 逻辑动态注入元信息（如 <meta name="cms-context" content="<?= $cmsToken ?>">）。但执行 ng build 后，原本正常的 <?php echo $token; ?> 会被悄然转换为 <!--?php echo $token; ?-->，导致 PHP 代码完全失效——这并非 Angular 主动“解析”PHP，而是其构建流水线中 CSS 优化器（基于 critters 库）在提取和内联关键 CSS 时，对 HTML 模板进行预处理的过程中，错误地将 <? 序列识别为 XML/HTML 注释起始符（类似 <!--），从而触发了保守性注释包裹。
根本原因在于 Angular CLI 的 inlineCritical 优化默认开启。该选项旨在提取首屏关键 CSS 并内联至 <head>，提升初始渲染性能；但其实现依赖 HTML 解析器，在扫描 <style> 和 <link> 标签时会遍历整个 HTML 字符流，意外匹配到 <? 字符组合（尤其在未加空格的紧凑写法如 <?php 中），进而将其包裹进 HTML 注释以“规避风险”。
✅ 解决方案：禁用 inlineCritical
在项目根目录的 angular.json 文件中，定位到对应构建配置（通常为 projects.your-app.architect.build.configurations.production，若使用默认开发构建则修改 development 或顶层 options），添加或修改 optimization.styles.inlineCritical 为 false：
立即学习“PHP免费学习笔记（深入）”；
"architect": {
"build": {
"configurations": {
"production": {
"optimization": {
"styles": {
"inlineCritical": false
}
},
// ... 其他配置
}
}
}
}⚠️ 注意事项：
- 此配置仅影响样式内联行为，不会降低 CSS 加载性能——你仍可手动优化关键 CSS（如通过 @import 分离、CDN 缓存或 SSR 预置），且 Angular 仍会执行 CSS 压缩、移除未使用样式等其他优化；
- 若使用多环境配置（如 staging, qa），需确保所有目标环境均设置该选项；
- 修改后务必重新运行 ng build --configuration=production（或对应环境），旧缓存产物可能仍含注释化标签；
- 不建议将 index.php 放入 src/ 目录下参与构建——Angular 默认只处理 src/index.html；正确做法是：将 src/index.html 构建后手动重命名为 index.php，或通过构建后脚本（如 postbuild npm script）自动替换 + 注入 PHP 内容。
? 总结：Angular 本身不解析 PHP，此问题纯属 CSS 优化器的副作用。关闭 inlineCritical 是安全、精准且官方支持的配置项，兼顾兼容性与构建稳定性，是 PHP+Angular 混合架构的标准实践之一。
