Host Angular app on IIS - Redirect to root and force HTTPS

Question

I have got an angular application hosted in IIS. In order to redirect all the requests to the root of the application and to allow angular routing to deal with the different routes, I have added a web.config file with a URL Rewrite rule, as follows:

<configuration>
<system.webServer>
  <rewrite>
    <rules>
     <rule name="Angular Routes" stopProcessing="true">
         <match url=".*" />
       <conditions logicalGrouping="MatchAll">
         <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
       </conditions>
       <action type="Rewrite" url="/" />
     </rule>
  </rules>
 </rewrite>
</system.webServer>
</configuration>

It works fine. However, I need now to force the application to redirect from HTTP to HTTPS. In order to do that I can add a new rule as the following post depicts: Angular 2 - always redirect to https:// instead of using http://

Rule to force HTTPS:

<configuration>
<system.webServer>
    <rewrite>
        <rules>
            <clear />
            <rule name="Redirect to https" stopProcessing="true">
                <match url="(.*)" />
                <conditions>
                    <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                </conditions>
                <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>
</configuration>

This rule works as well, but It breaks my redirect to root rule defined previously. So Does anybody have an idea How can I mix these two rules together or which other way I can achieve both purposes?

Solution 1

As an alternative solution I ended up forcing https on the main controller in the angular project directly, as follows. (Posted in case is useful for someone else)

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { environment } from '../environments/environment';

@Component({
  selector: 'vp-app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'vp-app';
  location: Location;

  ngOnInit() {
    if (environment.production) {
      if (location.protocol === 'http:') {
        window.location.href = location.href.replace('http', 'https');
      }
    }
  }
}

Solution 2

REDIRECT TO HTTPS & REDIRECT TO ROOT

Someone who is still looking for web.config solution, replace your existing web.config file code with the following code:

<?xml version="1.0" encoding="UTF-8"?>
  <configuration>
   <system.webServer>
    <rewrite>
      <rules>

          <!--START REDIRECT TO HTTPS-->
           <rule name="Redirect to https" stopProcessing="true">
                <match url=".*" />
                <conditions>
                    <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                </conditions>
                <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
            </rule>
            <!--END REDIRECT TO HTTPS-->

            <!--START REDIRECT TO ROOT-->
            <rule name="AngularJS" stopProcessing="true">
              <match url=".*" />
               <conditions logicalGrouping="MatchAll">
                  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
               </conditions>
               <action type="Rewrite" url="/" />
            </rule>
           <!--END REDIRECT TO ROOT-->

         </rules>
      </rewrite>
    </system.webServer>
 </configuration>

Note: For IIS 6 you may need to install URL Rewrite extension to make it work.

You can find URL Rewrite extension at: https://www.iis.net/downloads/microsoft/url-rewrite

Comments

[ruchit]

This solution worked well for the Angular 6 application hosted on IIS 10

[punkologist]

would this happen before a redirect to a identity provider?

[Paul]

When I add this to my web,config file it causes a 500.19 error when browsing the site.

[Arun Saini]

@Paul , Are you running your website on IIS 6?

[Marcius Bezerra]

only worked for me on the first link, on all others, it was HTTP

[maverickosama92]

Thanks buddy it helped to redirect to https. Cheers :)

[Samet ÇELİKBIÇAK]

it works for me, for example when I try to reach http://localhost:5000/products it automatically redirect to https://localhost:5000/products