Search code examples
angulardockerng-buildangular12angular-devkit

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.

Solution

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