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

+3


source to share


2 answers


Your url is / backend / public / api / auth / login so your proxy should be like this ie backend / *



{
  "/backend/*": {
    "target": "http://localhost:81/laravelapi",
    "secure": false,
    "pathRewrite": {"^/backend" : ""},
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

      

+7


source


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

0


source







All Articles