使用回送REST API时如何更改gulp-angular项目的端口号

Question

I´m making a project using loopback on the backend and angular on my frontend. The client side was generated with gulp-angular. After that I added the lb-services.js from loopback. The problem I´m having is that the angular app is trying to make requests to the API on the same port I have the gulp serve running . I have my loopback app on port 3000 and Angular runs on port 3001.

How can I tell Angular to change the port number when making request to the API?

I´ve tried modifying the gulp server.js like this:

  browserSync.instance = browserSync.init({
    startPath: '/',
    server: server,
    browser: browser,
    port:4000
  });

But this just makes both angular and the requests it makes on the API run on port 4000, getting me this result:

Angular running on: http://localhost:4000/

Request to loopback server:

http://localhost:4000/api/People 

What I want is this: Angular running on: http://localhost:4000/

Request to loopback server:

http://localhost:3000/api/People 

Can anyone help me achive this?

Answer 1

You can add a rewriteRule for the API to change the URL to localhost:3000. As shown here: https://www.browsersync.io/docs/options/#option-rewriteRules

Another option that's available for you is this: https://github.com/Swiip/generator-gulp-angular/blob/master/docs/how-it-works.md#proxy . You can use a proxy to redirect the API request to the correct URL. Like this (taken from Github example):

app.use('/api', proxy({target: 'http://localhost:3000/api', changeOrigin: true}));