在生产模式下构建会导致空页面,而在开发模式下构建则完美运行(Angular 8)

2024-02-10

在开发模式(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。加载页面后,找到所有文件,但页面为空白,没有错误。这些文件都像 Angular 生成的 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>

Dev-Mode

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 。


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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在生产模式下构建会导致空页面,而在开发模式下构建则完美运行(Angular 8) 的相关文章

随机推荐

  • C# 从文件序列化数据契约

    我有一个 Xml 消息列表 特别是我记录到文件中的 DataContract 消息 我正在尝试将它们从文件中一一反序列化 我不想立即将整个文件读入内存 因为我预计它会很大 我有这个序列化的实现并且有效 我通过使用 FileStream 进行
  • ARCORE:通过单击此可渲染对象来删除特定的可渲染对象

    我正在开发一个使用 ARCore 的 Sceneform 的项目 我基于ARCore提供的HelloSceneform示例进行开发 我想要做的是通过点击添加一个可渲染对象 然后当我单击屏幕上的特定可渲染对象时将其删除 我已经尝试了方法 An
  • 在原生 Javascript 中查找具有类的元素的索引

    有没有办法获取类名的索引 即 类 className 的第三个元素将是 3 而不使用 jQ 我不了解jQ 而且我现在没有时间学习它 而且我不想在我的代码中包含至少一些我不理解的代码 Thanks 顺便说一句 我使用了 jQ 而不是拼写出来
  • 由 Scala 宏生成时,依赖类型似乎“不起作用”

    为这个挥手的标题道歉 我不完全确定如何简洁地表达这个问题 因为我以前从未遇到过这样的事情 背景资料 我有以下特征 其中类型U是为了举行无形可扩展记录 https github com milessabin shapeless wiki Fe
  • 我可以使用 memcpy 写入多个相邻的标准布局子对象吗?

    免责声明 这是试图深入研究一个更大的问题 所以请不要纠结于这个例子在实践中是否有意义 而且 是的 如果你想的话copy对象 请使用 提供复制构造函数 但请注意 即使该示例也不会复制整个对象 它会尝试将一些内存复制到一些相邻的 Q 2 整数上
  • 如何在 EF Code First 中对表进行单一化?

    在命名数据库表时 我更喜欢使用单数名词 然而 在 EF 代码优先中 生成的表始终是复数 我的 DbSet 是复数的 我相信这是 EF 生成名称的地方 但我不想将这些名称单数化 因为我相信在代码中使用复数名称更实用 我也尝试过覆盖该设置但无济
  • 如何在 JavaScript 中将数组的每个成员乘以标量?

    例如 我如何实现以下目标无需迭代数组 var a 1 2 3 5 a should equal 5 10 15 Array map https developer mozilla org en JavaScript Reference Gl
  • 异步 useState 导致层次结构中未定义的元素

    设置 场景 我正在使用 twitter api 来获取数据并使用 twitter 卡将其呈现反应本机社交 https github com PierreCapo react native socials 推文数据 JSON 通过我的后端存储
  • 尝试将多个函数聚合到新列时出现意外的 KeyError Pandas

    我看过以下问题 将多个函数应用于多个 groupby 列 https stackoverflow com questions 14529838 apply multiple functions to multiple groupby col
  • 单击 div 时打开文件浏览器做出反应

    我的反应组件 import React PropTypes Component from react class Content extends Component handleClick e console log Hellooww wo
  • 将时间字符串转换为日期对象[重复]

    这个问题在这里已经有答案了 我正在使用时间选择器 它需要一个日期对象 从数据库中我得到一个像 17 00 00 这样的时间字符串 如何将 17 00 00 这样的时间字符串转换为日期对象 Edit我已经尝试过 Mike C Alex K 建
  • 如何将颜色与透明度混合?

    我希望能够混合两个或多个颜色对象 假设我从半透明的红色开始 var 红色 Color FromArgb 140 255 0 0 然后我想将半透明的绿色混合到其中 var green Color FromArgb 140 0 255 0 我遇
  • Select2 - 过滤特殊字符

    我的 select2 插件有问题 当我使用过滤器并输入 m ka 时 它会找到所有带有 m ka 和 maka 单词的选项 是否可以自定义此脚本以仅查找 m ka 单词 在此预览 https i stack imgur com Cd6Wf
  • 项目欧拉问题 14 的进一步优化(Collat​​z 序列)

    当我第一次开始尝试这个问题时 我的代码需要一分多钟才能完成运行并给我答案 我已经尝试过动态编程并存储以前的数字 因此不必多次运行相同的数字 我也尝试过压缩 n3 1 和 n 2 合并成一行 n3 1 但这两者都只能将我的代码缩短到 10 秒
  • 在可移植类库中包含 XPathSelectElement

    我该如何使用XPathSelectElement在便携式类库中 当我尝试包括System Xml XPath在项目中进行汇编时 出现以下错误 类型 System Xml Linq XElement 是在未引用的程序集中定义的 您必须添加对程
  • Scalaquery:按“任意”条件组合进行过滤

    我想加入任意长度的过滤器列表or 如果列表是固定长度的 它看起来像这样 query filter filters 0 filters 1 filter n 连接过滤器and会很容易 for filter filters query quer
  • 如何让openjdk 11支持椭圆曲线密码算法?

    尝试在 java 应用程序中调用 https URL 时出现错误 javax net ssl SSLException 无法生成 ECDH 密钥对 它在 Oracle JDK 1 8 0 152 上运行良好 当我们迁移到 Openjdk 1
  • Django - 跨多个视图形成并保存进度

    我正在开发一个 Django 项目 为了使表单体验更加流畅 我想将 ModelForm 分布在几个页面上 如果登录的用户可以在表单中保存进度而不实际发布内容 在这种情况下 JobApplication用户可以返回填写信息 而无需实际发送应用
  • 是否可以在网格行定义上使用触发器?

    我有一个网格 其行需要根据视图模型动态调整大小 我想做类似以下的事情
  • 在生产模式下构建会导致空页面,而在开发模式下构建则完美运行(Angular 8)

    在开发模式 APS WebAPI 下 构建工作完美 没有错误 ng b watch 当更改为生产模式 ng b aot 或 ng b prod 时 页面加载时不会出现错误 但会导致空页面 Index cshtml 将通过从 Homecont