在生产模式下构建会导致空白页面，而在开发模式下构建完美运行(Angular 8) [英] Build in production mode results in empty page while build in dev mode works perfectly (Angular 8)
问题描述
在开发模式 (APS-WebAPI) 中，构建完美无误 (ng b --watch).当更改为生产模式(ng b --aot 或 ng b --prod)时，页面加载没有错误，但会导致一个空页面.Index.cshtml 将通过从 Homecontroller 搜索文件夹中的 *.js 文件生成.自从我们从 Angular-6 升级到 Angular-8 后，就会出现这个问题.
In Development-mode (APS-WebAPI) the build works perfekt without errors (ng b --watch). When change to production-mode (ng b --aot OR ng b --prod) the page loads without error but results in an empty page. The Index.cshtml would generated by searching the *.js-files in the folder from the Homecontroller. This problem occurs since we upgrade from Angular-6 to 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.这非常有效.
We would like to publish our changes and environment upgrade (Angular-8 & TypeScript 3.4.5). In Dev-mode (ng b --watch) we render the main.js / polyfills.js / runtime.js / styles.css / vendor.js / modules*.js to the Index.cshtml. This works perfectly.
当使用--aot 或--prod 发布时，我们会获得所有使用 ES5 和 ES2015 的文件.在相同的方案中，我们将其呈现给 Index.cshtml.加载页面后，找到所有文件，但页面为空白，没有错误.这些文件都像在角度生成的 index.html 中一样加载
When publishing with --aot or --prod we get all files with the ES5 and ES2015. In the same scheme we render that to the Index.cshtml. After loading the page, all files are found but the page is blank without an error. The files are all loaded like in the angular generated index.html
我们使用下面的Index.cshtml，Dev-Mode和Prod-Mode一般是一样的.
We use the following Index.cshtml, it`s generally the same for Dev- and 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.
If necessary i would post also the angular.json later.
推荐答案
如果有人遇到同样的问题，我会提出我的解决方案.
I would present my solution, if somebody has the same problem.
来自 Angular 的构建优化器"导致空白页面.以下 github 问题让我找到了解决方案(https://github.com/angular/angular-cli/issues/8758).因此，如果您在 angular.json 中禁用 buildOptimizer，则一切正常.仅供参考，角度问题 12112 也指向这个问题(https://github.com/angular/angular-cli/issues/12112).
The "build-optimizer" from Angular induce the empty white page. The following github issue brougth me to the solution (https://github.com/angular/angular-cli/issues/8758). So if you disable the buildOptimizer in the the angular.json everything works perfectly. FYI the angular issue 12112 points also to this problem (https://github.com/angular/angular-cli/issues/12112).
这篇关于在生产模式下构建会导致空白页面，而在开发模式下构建完美运行(Angular 8)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
