从 Angular 7 迁移到 12 后出现混合内容错误答案

【问题标题】：Mixed Content error after migrating from Angular 7 to 12从 Angular 7 迁移到 12 后出现混合内容错误
【发布时间】：2021-09-13 17:30:47
【问题描述】：

堆栈： 带有 .NET 的 Angular 12，在 Docker 容器中运行。 @angular-devkit/build-angular:browser 正在构建捆绑包。

上次工作设置： 该应用程序之前在 Angular 7 上运行，所有资产确实都是通过 HTTPS 提供的。

问题： 通过 HTTPS 运行时，Angular 12 捆绑包提供资产，包括。 main.js、polyfills、样式表或基于 HTTP 的 favicon。这会导致 bundle、polyfill、styles.css 和 favicon 出现以下错误：

混合内容：页面是通过 HTTPS 加载的，但请求了不安全 X. 此请求已被阻止；必须提供内容通过 HTTPS。

我的第一个嫌疑人是 ng 构建过程，虽然我不知道确定方式的方法，但服务资产（？）因此我提到了堆栈的其余部分，以便在需要时检查那里。

更新：我标记了一个答案，但这是我决定采用的一种解决方法，虽然我仍然希望找到更深入的解决方案。

【问题讨论】：

标签： angular docker ng-build angular12 angular-devkit

【解决方案1】：

不建议在升级应用程序时跳过版本。理想的方式应该是一次升级 1 个主要版本，即 7.x -> 8.x 等等。

为了更好地理解，请遵循 Angular 的更新指南： https://update.angular.io/

【讨论】：

谢谢，我认为我们遵循了您链接到的本手册。也没有什么问题是失控的，没有什么事情发生了，除了这个奇怪的服务，所以我相信这是我们可以理解和解决的问题。

【解决方案2】：

如果您直接将Angular 7 升级到Angular 12，则会出现以下错误：

"Updating multiple major versions at once is not recommended."

假设您在项目上安装了Angular 7，现在您需要先将您的应用程序升级到Angular 8，然后将Angular 8 升级到Angular 9，然后将Angular 9 升级到Angular 10，然后再升级Angular 10给Angular 11：

ng update @angular/core@6 @angular/cli@6 --force
ng update @angular/core@7 @angular/cli@7 --force
ng update @angular/core@8 @angular/cli@8 --force
ng update @angular/core@9 @angular/cli@9 --force
ng update @angular/core@10 @angular/cli@10 --force
ng update @angular/core@11 @angular/cli@11 --force

现在，您已将Angular 7 应用程序升级到Angular 11，因此您将运行以下命令升级到最新的Angular 12 版本：

ng update @angular/core@12 @angular/cli@12 --force

--force 已附加到ng update 命令，以防出现"Incompatible peer dependencies found" 错误。

编辑

将以下元标记添加到HTML 中的<head> 元素：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

【讨论】：

谢谢，但我再次认为这不是问题所在。一切都在开发中。除了 Dockerized 构建尝试通过错误的协议获取资产之外，在生产中也是如此。
你能检查一下我的回答中的编辑版本吗？
谢谢，添加标签解决了问题。