Mixed Content error after migrating from Angular 7 to 12

Question

The stack: Angular 12 with .NET, running in a Docker container. Bundles are being built by @angular-devkit/build-angular:browser.

Last working setup: The application ran previously on Angular 7, all the assets were indeed served over HTTPS.

The problem: While running over HTTPS, Angular 12 bundle is serving assets incl. main.js, polyfills, stylesheet or favicon over HTTP. This is causing the following error for bundles, polyfills, styles.css and favicons:

Mixed Content: The page was loaded over HTTPS, but requested an insecure X. This request has been blocked; the content must be served over HTTPS.

My #1 suspect is the ng build process, although I'm not aware of a way to determine the way, the assets are served(?) Therefore I mentioned the rest of the stack to check there if needed.

UPDATE: I marked one answer but it's a workaround that I decided to go with as good enough, although there should be a more in-depth solution that I'm still hoping to find.

Salahuddin Ahmed · Accepted Answer · 2021-07-02T16:01:34.833

If you are upgrading Angular 7 to Angular 12 directly then you will get below error:

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

Assuming that you have Angular 7 installed on the project, now you need to first upgrading your application to Angular 8, then Angular 8 to Angular 9, then Angular 9 to Angular 10, then Angular 10 to 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

Now, you have upgraded your Angular 7 application to Angular 11, so you will run the below command to upgrade to latest Angular 12 version:

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

--force to the ng update command has been appended incase if it gives "Incompatible peer dependencies found" error.

EDIT

Add the following meta tag to your <head> element in your HTML:

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

Thanks, but again I don't believe that's the issue. Everything works in development. In production too with the exception of Dockerized build trying to fetch assets through the wrong protocol. — Cosmic Luke, Jul 02 '21 at 15:50

score 0 · Answer 2 · answered Jul 01 '21 at 18:28

0

It's not advisable to skip versions while upgrading your application. Ideal way should be to upgrade 1 major version at once, i.e. 7.x -> 8.x and so on.

For a better understanding follow Angular's update guide: https://update.angular.io/

answered Jul 01 '21 at 18:28

nd10

11
3

Thanks, I think we followed this manual you are linking to. There are also no issues that are out of control, nothing is blowing up etc. other than this serving weirdness so I believe that is something that we can understand and fix. – Cosmic Luke Jul 01 '21 at 20:59

score 0 · Answer 3 · answered Oct 06 '22 at 06:45

It's advisable that if you are updating to angular 13 from angular 10, then first need to update it to angular 11 and subsequent 12 later to 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

Like this, the above error will not appear

*Note: Adding --force to the ng update command won't give an "Incompatible peer dependencies found" error.

I hope this will solve the Migration Bug.

Happy Coding !!!

Mixed Content error after migrating from Angular 7 to 12

3 Answers3