title: Angular 7 : How to change http request to https ? I tried using Interceptor
body: <p>I am creating an angular 7 application. In this application, I am using Facebook social login.</p>
  
  <p>When using this, I got console error saying my request should be <code>https://</code> requests. So I thought of using interceptor to convert http to https.</p>
  
  <p>I created an interceptor to change my http request to https request and made the following code changes.</p>
  
  <p><strong>http.interceptor.ts:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent,HttpResponse }  from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  @Injectable()
  export class httpsInterceptor implements HttpInterceptor {
      intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
  
      console.log(req.url);
  
      const secureReq = req.clone({
        url: req.url.replace('http://', 'https://')
      });
  
      return next.handle(secureReq);
    }
  }
  </code></pre>
  
  <p><strong>app.module.ts:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { httpsInterceptor } from './interceptor/https.interceptor';
  
      providers: [
       { provide: HTTP_INTERCEPTORS, useClass: httpsInterceptor, multi: true }   
      ],
  </code></pre>
  
  <p>After making the above changes, when I run my application as "ng serve", I can access the application through <a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a>, but it is not directing to "<a href="https://localhost:4200" rel="nofollow noreferrer">https://localhost:4200</a>" and also I didn't see the console log from interceptor class.</p>
  
  <p>And when I run my application as "ng serve --ssl true", I am able to access the application through <a href="https://localhost:4200" rel="nofollow noreferrer">https://localhost:4200</a> but nothing shows up when I type <a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a>.</p>
  
  <p><strong>Expected output:</strong></p>
  
  <p>When I run "ng serve" and open <a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a>, it has to redirect to <a href="https://localhost:4200" rel="nofollow noreferrer">https://localhost:4200</a></p>
  
  <p>When I run "ng serve --ssl true", I should be able to access the app through <a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a> also.</p>
  
  <p>Kindly let me know what am I doing wrong or do I need to make few more code changes ?</p>
  
  <p>Thanks.</p>