title: Proxy configuration is not working in angular 6
body: <p>I have metronic_v5.5.2 Angular Version and I am trying to integrate Its angular version with my backend API.</p>
  
  <p>As I am pretty new to all this, Now the issue is with my proxy configuration that is not working according to my expectations. </p>
  
  <p>The following is the code of proxyconfig.json file</p>
  
  <pre><code>{
      "/api": {
          "target": "https://localhost:5001",
          "secure": false,
          "changeOrigin": true,
          "logLevel": "debug"
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/VofJh.png" rel="noreferrer">Image is showing that the request is routing to the URL "https://localhost:5001/api/auth/login" 
  POST /api/auth/login -> https://localhost:5001</a></p>
  
  <p>But In browsers' console this request is actually routing to the URL <a href="http://localhost:4200/api/auth/login" rel="noreferrer">http://localhost:4200/api/auth/login</a> which return 401 error. I am unable to route on clicking of button to the url: <a href="https://localhost:5001/api/auth/login" rel="noreferrer">https://localhost:5001/api/auth/login</a>
  <br>
  <br>
  Following is the HTML Code</p>
  
  <pre><code>&lt;!--begin::Form--&gt;
  &lt;form class="m-login__form m-form" name="form" (ngSubmit)="f.form.valid &amp;&amp; submit()" #f="ngForm" novalidate&gt;
      &lt;div class="form-group"&gt;
          &lt;mat-form-field&gt;
              &lt;mat-label&gt;Email&lt;/mat-label&gt;
              &lt;input matInput type="email" name="email" placeholder="Email address" autocomplete="off" [(ngModel)]="model.email" #email="ngModel" email="true" required&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;mat-form-field&gt;
              &lt;mat-label&gt;Password&lt;/mat-label&gt;
              &lt;input matInput minlength="4" type="password" name="password" placeholder="Password" autocomplete="off" [(ngModel)]="model.password" #password="ngModel" required&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;!--end::Form--&gt;
  
  &lt;!--begin::Action--&gt;
  &lt;div class="m-login__action m-login__action--fit"&gt;
      &lt;a href="javascript:;" (click)="forgotPasswordPage($event)" class="m-link"&gt;
          &lt;span translate="AUTH.GENERAL.FORGOT_BUTTON"&gt;Forgot Password?&lt;/span&gt;
      &lt;/a&gt;
      &lt;m-spinner-button [options]="spinner" (click)="submit()"&gt;{{'AUTH.LOGIN.BUTTON' | translate}}&lt;/m-spinner-button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Following is the login.component.ts code</p>
  
  <pre><code>submit() {
          this.spinner.active = true;
          if (this.validate(this.f)) {
              this.authServiceDb.logindb(this.model).subscribe(response =&gt; {
                      this.router.navigate(['/']);
                      this.alertify.success('Logged In Successfully');
                      this.spinner.active = false;
                      this.cdr.detectChanges();
              }, error =&gt; {
                  this.alertify.error(error);
              });
          }
      }
  </code></pre>
  
  <p>function the code for authdb exported class is given blow, Edit</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers, RequestOptions, Response } from '../../../node_modules/@angular/http';
  import { map, catchError } from 'rxjs/operators';
  import { throwError } from '../../../node_modules/rxjs';
  import { tokenNotExpired, JwtHelper } from 'angular2-jwt';
  
  @Injectable({
      providedIn: 'root'
  })
  export class AuthdbService {
      baseUrl = 'api/auth/';
      userToken: any;
      decodedTokenn: any;
      jwtHelper: JwtHelper = new JwtHelper();
      constructor(private http: Http) { }
  public logindb(model: any) {
      return this.http.post(this.baseUrl + 'login', model, this.requestOptions()).pipe(map((response: Response) =&gt; {
        const user = response.json();
        if (user) {
          localStorage.setItem('token', user.tokenString);
          this.decodedTokenn = this.jwtHelper.decodeToken(user.tokenString);
          this.userToken = user.tokenString;
        }
      })).pipe(catchError(this.handleError));
    }
    register(model: any) {
      return this.http.post(this.baseUrl + 'register', model, this.requestOptions()).pipe(catchError(this.handleError));
    }
    loggedIn() {
      return tokenNotExpired('token');
    }
    private requestOptions() {
      const headers = new Headers({
        'Content-type': 'application/json'});
      return new RequestOptions({headers: headers});
    }
    private handleError(error: any) {
      const applicationError = error.headers.get('Application-Error');
      if (applicationError) {
        return throwError(applicationError);
      }
      const serverError = error.json();
      let modelStateErrors = '';
      if (serverError) {
        for (const key in serverError) {
          if (serverError[key]) {
            modelStateErrors += serverError[key] + '\n';
          }
        }
      }
      return throwError(
        modelStateErrors || 'Server Eroor'
      );
    }
  }
  </code></pre>
  
  <p>And In My package.json I have the following code</p>
  
  <pre><code>{
      "name": "default",
      "version": "0.0.0",
      "license": "MIT",
      "scripts": {
          "ng": "ng",
          "start": "ng serve --proxy-config proxyconfig.json",
          "build": "ng build --prod",
          "test": "ng test",
          "lint": "ng lint",
          "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
          "@angular/animations": "^6.1.0",
          "@angular/cdk": "^6.4.0",
          "@angular/common": "^6.1.0",
          "@angular/compiler": "^6.1.0",
          "@angular/forms": "^6.1.0",
          "@angular/http": "^6.1.0",
          "@angular/platform-browser": "^6.1.0",
          "@angular/platform-browser-dynamic": "^6.1.0",
          "@angular/platform-server": "^6.1.0",
          "@angular/router": "^6.1.0",
          "@kolkov/angular-editor": "^0.10.3",
          "@ng-bootstrap/ng-bootstrap": "^2.2.0",
          "@ngx-loading-bar/core": "^2.1.1",
          "@ngx-translate/core": "^10.0.2",
          "@types/lodash": "^4.14.112",
          "alertifyjs": "^1.11.1",
          "angular-in-memory-web-api": "^0.6.0",
          "angular2-jwt": "^0.2.3",
          "chart.js": "^2.7.2",
          "classlist.js": "^1.1.20150312",
          "core-js": "^2.5.7",
          "hammerjs": "^2.0.8",
          "lodash": "^4.17.10",
          "material-design-icons": "^3.0.1",
          "ng2-charts": "^1.6.0",
          "ngx-auth": "4.0.0",
          "ngx-highlightjs": "^2.0.4",
          "ngx-perfect-scrollbar": "^6.2.0",
          "ngx-permissions": "^5.0.0",
          "object-path": "^0.11.4",
          "rxjs-compat": "^6.2.2",
          "rxjs-tslint": "^0.1.5",
          "web-animations-js": "^2.3.1",
          "zone.js": "^0.8.26"
      },
      "devDependencies": {
          "@angular-devkit/build-angular": "^0.7.0",
          "@angular/cli": "^6.0.8",
          "@angular/compiler-cli": "^6.1.0",
          "@angular/core": "^6.1.0",
          "@angular/language-service": "^6.1.0",
          "@angular/material": "^6.4.0",
          "@angular/material-moment-adapter": "^6.4.0",
          "@types/jasmine": "^2.8.8",
          "@types/jasminewd2": "^2.0.3",
          "@types/node": "^10.5.2",
          "codelyzer": "^4.4.2",
          "jasmine": "^3.1.0",
          "jasmine-core": "^3.1.0",
          "jasmine-spec-reporter": "~4.2.1",
          "karma": "~2.0.4",
          "karma-chrome-launcher": "^2.2.0",
          "karma-coverage-istanbul-reporter": "^2.0.1",
          "karma-jasmine": "^1.1.2",
          "karma-jasmine-html-reporter": "^1.2.0",
          "moment": "^2.22.2",
          "protractor": "^5.3.2",
          "rxjs": "^6.2.2",
          "ts-node": "^6.0.3",
          "tslint": "~5.9.1",
          "typescript": "2.7.2"
      }
  }
  </code></pre>