Angular-cli proxy not working
I am using fresh angular-cli "my-project" and created a simple dummy service. I want this service to be connected to a laravel server on my local machine. I found that the Angular-CLI proxy for the backend doesn't work , but even these steps don't work for me. Chrome still goes to localhost: 4200.
My service
import { Injectable } from '@angular/core';
import {Http, Response} from '@angular/http';
@Injectable()
export class DummyService {
constructor(private http: Http) {
console.log('Hello dummyService');
}
getMessages() {
return this.http.get('/backend/public/api/auth/login').map((res: Response) => res.json());
}
}
my proxy.config.json
{
"/backend": {
"target": "http://localhost:81/laravelapi",
"secure": false,
"pathRewrite": {"^/backend" : ""},
"changeOrigin": true,
"logLevel": "debug"
}
}
and my original package is package.json
"start": "ng serve --proxy-config proxy.config.json",
on startup I get the following log message:
** NG Live Development Server is running on http://localhost:4200 **
0% compiling
10% building modules 1/1 modules 0 active
10% building modules 4/4 modules 0 active[HPM] Proxy created: /backend -> http://localhost:81/laravelapi
[HPM] Proxy rewrite rule created: "^/backend" ~> ""
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
10% building modules 4/5 modules 1 active ...ct\node_modules\jquery\dist\jquery.js
10% building modules 5/6 modules 1 active ...e_modules\metismenu\dist\metisMenu.js
and in the end:
webpack: Compiled successfully.
[HPM] Rewriting path from "/backend/public/api/auth/login" to "/public/api/auth/login"
[HPM] GET /backend/public/api/auth/login ~> http://localhost:81/laravelapi
but in the browser I get a GET http: // localhost: 4200 / backend / public / api / auth / login 404 (not found)
so it doesn't seem to work. I am working with "@ angular / cli": "^ 1.0.0".
Any ideas what I am doing wrong?
I just want to write inside my code / Backend / public / API / Authentication / Login and these calls should be http: // localhost: 81 / laravelapi / public / api / auth / login on my local development machine.
thanks for any advice! Peter
source to share
Steps
1) In the root folder of your Angular CLI app, create a new file named proxy.conf.json
Paste into the following JSON object.
{
"/*/*": {
"target": "http://localhost:81",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}
2) Open the file package.json
and change:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
... to:
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
3)
A) Open Command Prompt
B) Go to the root folder of your Angular Cli app
C) type npm start
and hit enter
source to share