CODEWITHSUNDEEP
angulardockerng-buildangular12angular-devkit
Cosmic Luke
Cosmic Luke

Reputation: 63

Mixed Content error after migrating from Angular 7 to 12

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.

Upvotes: 6

Views: 7631

Answers (3)

Basavaraj SK
Basavaraj SK

Reputation: 499

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 !!!

Upvotes: 0

Salahuddin Ahmed
Salahuddin Ahmed

Reputation: 5658

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

Upvotes: 5

nd10
nd10

Reputation: 285

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/

Upvotes: 0

Related Questions