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?

I ended up forcing https directly in the Angular Project with a couple of lines of code. If u are interested in doing the same let me know, i will share my code with u. — D.B, Mar 13 '18 at 06:13
Sure.. it will be very helpful to me. my project is in angular 5.3.2 and API project in dot net core 2.1.3. Thank you. — Vimal Vataliya, Mar 13 '18 at 07:20

score 29 · Accepted Answer · edited Mar 11 '20 at 10:44

29

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

edited Mar 11 '20 at 10:44

Derek Hill

5,965
5
55
74

answered Mar 13 '18 at 07:47

D.B

4,009
14
46
83

would this happen before a redirect to a identity provider? – punkologist May 16 '19 at 22:14
only worked for me on the first link, on all others, it was HTTP – Marcius Bezerra Aug 05 '20 at 22:33
it works for me, for example when I try to reach `http://localhost:5000/products` it automatically redirect to `https://localhost:5000/products` – Samet ÇELİKBIÇAK Aug 31 '21 at 10:36

Arun Saini · Answer 2 · 2018-08-02T05:22:28.863

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

This solution worked well for the Angular 6 application hosted on IIS 10 — ruchit, Aug 01 '18 at 06:33
When I add this to my web,config file it causes a 500.19 error when browsing the site. — Paul, Aug 07 '19 at 08:02

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

2 Answers2