Mixed Content error after migrating from Angular 7 to 12

user_16359607 0
Viewed 2922

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.

angular-devkit angular12 ng-build angular docker
2 Answers

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">
user_134406690

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/

user_87585760
Related