Angular开发模式下发布应用后ng-reflect属性不显示如何解决？

原因说明 #

ng-reflect系列属性的输出逻辑不直接和Angular运行时的开发/生产模式绑定，核心由Angular编译器的构建配置控制。你执行dotnet Debug发布时，虽然运行环境是开发模式，但Angular构建流程默认关闭了ng-reflect属性的输出。

解决步骤 #

• 调整dotnet发布调用的Angular构建指令
  打开项目根目录的.csproj文件，查找Debug配置下的Angular构建逻辑，确保调用的是开发模式构建脚本，参考配置如下：

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
  <SpaRoot>ClientApp\</SpaRoot>
  <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
</PropertyGroup>
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --configuration development" Condition="'$(Configuration)' == 'Debug'" />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --configuration production" Condition="'$(Configuration)' == 'Release'" />
  <!-- 原有其余配置保持不变即可 -->
</Target>

• 修改Angular编译器配置
  打开Angular目录下的tsconfig.app.json，在angularCompilerOptions节点新增配置项：

{
  "angularCompilerOptions": {
    "preserveNgReflectProperties": true,
    // 其余原有配置无需修改
  }
}

• 检查Angular构建优化配置
  打开angular.json，找到对应项目的开发构建配置节点`projects.你的项目名.architect.build.configurations.development，确认以下配置值：

{
  "optimization": false,
  "buildOptimizer": false
}

AOT模式下上述配置依然生效，无需强制切换到JIT编译模式。

• 重新执行发布命令，发布后即可在运行的应用中看到ng-reflect系列属性。

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