带有优化的角度构建导致索引文件错误答案

【问题标题】：带有优化的角度构建导致索引文件错误
【发布时间】：2022-01-22 20:40:15
【问题描述】：

我的公司去年在现有的 ASP.NET MVC 项目中添加了一个 Angular 应用程序。 Angular 索引宿主网页是一个 .cshtml 文件，其中包含剃须刀代码，例如 @RenderSection("SharedCss", false)。

在我们上周升级到 Angular 12 之前它运行良好。使用优化选项 (ng build --optimization) 构建 Angular 应用程序时，输出 index.cshtml 文件被错误地修改。

原始 index.cshtml 文件

<!DOCTYPE html><html lang="en">
  <head>
    <base href="/">

    <!-- razor code start-->
      @RenderSection("SharedCss", false)
    <!-- razor code end-->

  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>

预期结果

<!DOCTYPE html><html lang="en">
  <head>
    <base href="/">

    <!-- razor code start-->
      @RenderSection("SharedCss", false)
    <!-- razor code end-->

    <style>:root{--blue:#007bff;.........</style>
    <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="styles.css"></noscript>

  </head>
  <body>
    <app-root>Loading...</app-root>
    <script src="runtime-es2015.js" ............ </script>
</body>
</html>

错误的结果

<!DOCTYPE html><html lang="en">
  <head>
    <base href="/">

    <!-- razor code start-->
      </head><body>@RenderSection("SharedCss", false)
    <!-- razor code end-->

    <style>:root{--blue:#007bff;.........</style>
    <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="styles.css"></noscript>

    <app-root>Loading...</app-root>
    <script src="runtime-es2015.js" ............ </script>
</body>
</html>

</head><body> html 被错误地移到剃刀代码之前（请参阅 和  之间的行）。似乎在构建优化过程中，当 Angular 无法解析 head 标签中的意外 html 语法（例如剃刀代码）时，它会附加 </head> 标签来结束 html head 元素。

注意：

为了消除升级因素，我创建了新的空 Angular 应用，但问题仍然存在。
这发生在 Angular 12+ 之后

我找不到任何人提及此行为/问题。在为生产环境构建时，我仍然想打开优化标志。请帮忙！

【问题讨论】：

标签： html asp.net angular optimization build

【解决方案1】：

尝试将移出位置的代码封装在<div> 中。这很可能会使 angular 避免它所做的移动并弄乱您的代码。

就这样吧

<!DOCTYPE html><html lang="en">
  <head>
    <base href="/">
    
    <div>
        <!-- razor code start-->
        @RenderSection("SharedCss", false)
        <!-- razor code end-->
    </div>

  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>

【讨论】：