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?

Answer 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');
      }
    }
  }
}