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

6

堆栈: Angular 12与.NET一起运行在Docker容器中。包由@angular-devkit/build-angular:browser构建。

上一个可工作的配置: 应用程序以前在Angular 7上运行,所有资源确实是通过HTTPS提供的。

问题: 在HTTPS下运行时,Angular 12捆绑包通过HTTP提供资产,包括main.js、polyfills、stylesheet或favicon。这会导致捆绑包、polyfills、styles.css和favicons出现以下错误:

混合内容:该页面已通过HTTPS加载,但请求的X不安全。此请求已被阻止;内容必须通过HTTPS提供。

我怀疑的首要嫌疑人是ng构建过程,尽管我不知道确定资产服务方式的方法(?)因此,我提到了堆栈的其余部分,以便在需要时检查。

更新:我标记了一个答案,但这只是一个我决定足够好的解决方法,尽管我仍然希望能找到更彻底的解决方法。

3个回答

4
如果您直接将 Angular 7 升级到 Angular 12,则会出现以下错误信息:"Updating multiple major versions at once is not recommended." 假设您的项目已安装了 Angular 7,现在需要先将应用程序升级到 Angular 8,然后再将其升级到 Angular 9,再到 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 标签:

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

谢谢,但我仍然不相信这是问题所在。在开发中一切都正常。在生产环境中也是如此,除了Docker化构建尝试通过错误的协议获取资源。 - Cosmic Luke
请您能否检查一下我回答中的已编辑版本? - Salahuddin Ahmed
谢谢,添加<meta>标签解决了问题。 - Cosmic Luke

0

如果你正在从Angular 10升级到Angular 13,建议先将其更新到Angular 11,然后再依次更新到Angular 12和Angular 13。

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

像这样,以上错误就不会出现了。

*注意:在ng update命令中添加--force选项将不会出现“发现不兼容的对等依赖项”错误。

我希望这能解决迁移错误。

编码愉快!!!


0

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

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


谢谢,我认为我们遵循了您提供链接的手册。除了这个服务器异常之外,没有任何失控或爆炸等问题。因此,我相信这是我们可以理解和解决的问题。 - Cosmic Luke

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接