在生产模式下构建会导致空白页,而在开发模式下构建会完美工作(Angular 8) [英] Build in production mode results in empty page while build in dev mode works perfectly (Angular 8)

查看:92
本文介绍了在生产模式下构建会导致空白页,而在开发模式下构建会完美工作(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-和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的"build-optimizer"引起空白页面.以下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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆