Angular(2+) proxy config not working with angular-cli and angular-quickstart

Just new to Angular(2+). Previously worked in AngularJS, but around 2 years back.

I added dev dependency angular-cli 1.0.2 in package.json. I'm trying to set proxy config to connect to external server in a project I cloned from angular-quickstart using this link.

I added proxy.config.json in root directory

{
    "/api/*": {
        "target": "http://10.10.10.10:8090",
        "secure": false,
        "logLevel": "debug"
    }
}

In package.json I added --proxy-config proxy.config.json in start script.

"start": "concurrently \"npm run build:watch\" \"npm run serve --proxy-config proxy.config.json\""

Complete package.json

{
    "name": "myquickapp",
    "version": "1.0.0",
    "description": "QuickStart package.json from the documentation, supplemented with testing support",
    "scripts": {
        "build": "tsc -p src/",
        "build:watch": "tsc -p src/ -w",
        "build:e2e": "tsc -p e2e/",
        "serve": "lite-server -c=bs-config.json",
        "serve:e2e": "lite-server -c=bs-config.e2e.json",
        "prestart": "npm run build",
        "start": "concurrently \"npm run build:watch\" \"npm run serve --proxy-config proxy.config.json\"",
        "pree2e": "npm run build:e2e",
        "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
        "preprotractor": "webdriver-manager update",
        "protractor": "protractor protractor.config.js",
        "pretest": "npm run build",
        "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
        "pretest:once": "npm run build",
        "test:once": "karma start karma.conf.js --single-run",
        "lint": "tslint ./src/**/*.ts -t verbose"
    },
    "keywords": [],
    "author": "",
    "license": "MIT",
    "dependencies": {
        "@angular/common": "~4.0.0",
        "@angular/compiler": "~4.0.0",
        "@angular/core": "~4.0.0",
        "@angular/forms": "~4.0.0",
        "@angular/http": "~4.0.0",
        "@angular/platform-browser": "~4.0.0",
        "@angular/platform-browser-dynamic": "~4.0.0",
        "@angular/router": "~4.0.0",
        "angular-in-memory-web-api": "~0.3.0",
        "bootstrap": "^3.3.7",
        "core-js": "^2.4.1",
        "rxjs": "5.0.1",
        "systemjs": "0.19.40",
        "zone.js": "^0.8.4"
    },
    "devDependencies": {
        "@angular/cli": "^1.0.2",
        "@types/jasmine": "2.5.36",
        "@types/node": "^6.0.46",
        "canonical-path": "0.0.2",
        "concurrently": "^3.2.0",
        "jasmine-core": "~2.4.1",
        "karma": "^1.3.0",
        "karma-chrome-launcher": "^2.0.0",
        "karma-cli": "^1.0.1",
        "karma-jasmine": "^1.0.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "lite-server": "^2.2.2",
        "lodash": "^4.16.4",
        "protractor": "~4.0.14",
        "rimraf": "^2.5.4",
        "tslint": "^3.15.1",
        "typescript": "~2.1.0"
    },
    "repository": {}
}

In Component I'm trying to connect to external server. app.component.ts

import { Component, OnInit } from '@angular/core';
import { Http, Headers, Response } from "@angular/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  headers = new Headers();
  user = {
    "email": "test1@gmail.com",
    "name": "test1user"
  }

  constructor(private http: Http) {
    this.headers.append("Content-Type", "application/json");
  }

  ngOnInit() {
    console.log("Init");
    this.testPost().subscribe(res => {
      console.log("subscribe /api/v1/user.....");
      // console.log(res);
    });
  }

  testPost() {
    return this.http.post('/api/v1/user', JSON.stringify(this.user), { headers: this.headers })
      .map((response: Response) => {
        console.log(response);
        console.log(response.json());
      });
  }
}

When I try to run this by npm start. Page loads. But it tries o connect to http://localhost:3000/api/v1/user and gives 404 error, instead of connecting to http://10.10.10.10:8090/api/v1/user

Why is it not connecting? What's the solution for this?

However, the proxy settings is working fine if I create a project locally using angular-cli

I know it uses webpack and quickstart uses systemjs. But what does it has to do with proxy settings?

package.json in project created with ng-cli

{
    "name": "ngseed",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve --proxy-config proxy.config.json",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/common": "^4.0.0",
        "@angular/compiler": "^4.0.0",
        "@angular/core": "^4.0.0",
        "@angular/forms": "^4.0.0",
        "@angular/http": "^4.0.0",
        "@angular/platform-browser": "^4.0.0",
        "@angular/platform-browser-dynamic": "^4.0.0",
        "@angular/router": "^4.0.0",
        "core-js": "^2.4.1",
        "rxjs": "^5.1.0",
        "zone.js": "^0.8.4"
    },
    "devDependencies": {
        "@angular/cli": "1.0.1",
        "@angular/compiler-cli": "^4.0.0",
        "@types/jasmine": "2.5.38",
        "@types/node": "~6.0.60",
        "angular-ide": "^0.9.19",
        "codelyzer": "~2.0.0",
        "jasmine-core": "~2.5.2",
        "jasmine-spec-reporter": "~3.2.0",
        "karma": "~1.4.1",
        "karma-chrome-launcher": "~2.0.0",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^0.2.0",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.0",
        "ts-node": "~2.0.0",
        "tslint": "~4.5.0",
        "typescript": "~2.2.0"
    }
}

Is it the differences in start script? If so what change I need to do?

via Shiju K Babu