Question

在开发模式（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，对于开发模式和生产模式，它通常是相同的。

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。

Answer 1

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

Angular的“ build-optimizer”引起空白页面。以下github问题使我感到困惑（https://github.com/angular/angular-cli/issues/8758）。因此，如果您在angular.json中禁用buildOptimizer，则一切运行正常。仅供参考，角度问题12112也指向这个问题（https://github.com/angular/angular-cli/issues/12112）。

在生产模式下构建会导致空白页，而在开发模式下构建会完美工作（角度8）

1 个答案: