在生产模式下构建会导致空白页面，而在开发模式下构建可以完美运行（Angular 8）答案

【问题标题】：Build in production mode results in empty page while build in dev mode works perfectly (Angular 8)在生产模式下构建会导致空白页面，而在开发模式下构建可以完美运行（Angular 8）
【发布时间】：2019-11-19 19:25:38
【问题描述】：

在开发模式 (APS-WebAPI) 下，构建工作完美无误 (ng b --watch)。当更改为生产模式（ng b --aot 或 ng b --prod）时，页面加载没有错误，但导致页面为空。 Index.cshtml 将通过在 Homecontroller 的文件夹中搜索 *.js 文件来生成。自从我们从 Angular-6 升级到 Angular-8 后，就会出现这个问题。

我们想发布我们的更改和环境升级（Angular-8 和 TypeScript 3.4.5）。在开发模式（ng b --watch）中，我们将 main.js / polyfills.js / runtime.js / styles.css / vendor.js / modules*.js 渲染到 Index.cshtml。这完美无缺。

当使用--aot 或--prod 发布时，我们会获得所有带有 ES5 和 ES2015 的文件。在相同的方案中，我们将其渲染到 Index.cshtml。加载页面后，找到所有文件，但页面为空白且没有错误。这些文件都像在角度生成的 index.html 中一样加载

我们使用下面的Index.cshtml，Dev-Mode和Prod-Mode一般是一样的。

ConfigurationViewModel model = new ConfigurationViewModel();
var webPath = HttpRuntime.AppDomainAppVirtualPath;
var localPath = HostingEnvironment.MapPath(webPath);
var angularPath = Path.Combine(localPath ?? throw new InvalidOperationException(), "Map");
var angularDirectory = new DirectoryInfo(angularPath);

生产模式

model.RuntimeJsEs5 = angularDirectory.GetFiles("runtime-es5*.js").Single().Name;
model.RuntimeJsEs2015 = angularDirectory.GetFiles("runtime-es2015*.js").Single().Name;
model.PolyfillsJsEs5 = angularDirectory.GetFiles("polyfills-es5*.js").Single().Name;
model.PolyfillsJsEs2015 = angularDirectory.GetFiles("polyfills-es2015*.js").Single().Name;
model.MainJsEs5 = angularDirectory.GetFiles("main-es5*.js").Single().Name;
model.MainJsEs2015 = angularDirectory.GetFiles("main-es2015*.js").Single().Name;
model.StylesCss = angularDirectory.GetFiles("styles.css").Single().Name;


<head>
....
<link rel="stylesheet" href="@Model.ConfigurationViewModel.StylesCss">
....
</head>
<body>
....
<script type="module" #src="@Model.ConfigurationViewModel.RuntimeJsEs2015"></script>
<script type="module" src="@Model.ConfigurationViewModel.PolyfillsJsEs2015"></script>
<script nomodule src="@Model.ConfigurationViewModel.RuntimeJsEs5"></script>
<script nomodule" src="@Model.ConfigurationViewModel.PolyfillsJsEs5"></script>
<script type="module" src="@Model.ConfigurationViewModel.MainJsEs2015"></script>
<script nomodule src="@Model.ConfigurationViewModel.MainJsEs5"></script>
....
</body>

开发模式

model.RuntimeJsEs2015 = angularDirectory.GetFiles("runtime.js").Single().Name;
model.PolyfillsJsEs2015 = angularDirectory.GetFiles("polyfills.js").Single().Name;
model.MainJsEs2015 = angularDirectory.GetFiles("main.js").Single().Name;
model.StylesCss = angularDirectory.GetFiles("styles.css").Single().Name;
model.VendorJsEs2015 = angularDirectory.GetFiles("vendor.js").Single().Name;


<head>
....
<link rel="stylesheet" href="@Model.ConfigurationViewModel.StylesCss">
....
</head>
<body>
....
<script type="module" src="@Model.ConfigurationViewModel.RuntimeJsEs2015"></script>
<script type="module" src="@Model.ConfigurationViewModel.PolyfillsJsEs2015"></script>
<script type="module" src="@Model.ConfigurationViewModel.VendorJsEs2015"></script>
<script type="module" src="@Model.ConfigurationViewModel.MainJsEs2015"></script>
....
</body>

如有必要，我稍后也会发布 angular.json。

【问题讨论】：

标签： build angular8 dev-to-production

【解决方案1】：

如果有人遇到同样的问题，我会提出我的解决方案。

来自 Angular 的“构建优化器”会导致空白页面。以下 github 问题让我想到了解决方案 (https://github.com/angular/angular-cli/issues/8758)。因此，如果您在 angular.json 中禁用 buildOptimizer，一切都会完美运行。仅供参考，角度问题 12112 也指向此问题 (https://github.com/angular/angular-cli/issues/12112)。

【讨论】：