run Angular 4 + node API at a time

问题

I am new for angular and I have requirements to develop a web application with Angular4(Front) + REST API using node js(API connectivity with Ms Sql).

Now my confusion is that is it better if I develop both projects separately or not...?

Personally, I prefer to develop both projects separately.

But I am using the visual studio code as my IDE and with visual studio code, I am able to work only one project at a time.

I want to work on both projects at a time.

Is there any way/any other IDE which can help me out? Or Is there any way to run two projects at a time in visual studio code...?(I have researched a lot for that but I didn't find any helpful solutions)

any help will be highly appreciated

回答1:

Angular CLI has a development proxy configuration option that can be used to intercept calls to a development back-end and route them to the API. This can allow you to work on the projects independently as well as taking advantage of @angular/cli tools.

You'd create a file called proxy.conf.json at the same level as your angular-cli.json file. Let's say your node API in development runs on port 3000 at http://localhost:3000 and your API endpoints are all under path "/api", the contents of proxy.conf.json would look like:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

You can set up as many intercepts as you need, in this case it would only intercept calls made to "/api" and direct them towards the project running at http://localhost:3000.

You would then need to modify yournpm start in package.json of the angular app command to utilize the proxy:

"scripts": {
   ...
   "start": "ng serve --proxy-config proxy.conf.json",
   ...
},

Then you would just need to run both the back-end and front-end separately in different command windows. You can use a library such as concurrently to run multiple commands in development with a single npm start. You'd set up your npm start command in the base node API project something like this:

"scripts": {
    "start": "concurrently \"./bin/www\" \"cd public && npm start\"",
}

In this example, my node (express) app is activated from ./bin/www and my Angular app is located in the public folder, but that could obviously be different folder depending on your project structure. You're start could be simpler if the backend node api is just a single entry file "start": "concurrently \"node ./server.js" \"cd public && npm start\"".

Sample structure:

Project
    server.js (back-end node API)
    package.json (concurrently library and command added here)
    public (angular front-end app)
        src
        .angular-cli.json
        package.json (npm start updated to use proxy)
        proxy.conf.json (proxy configuration goes here)

Hopefully that helps!

来源：https://stackoverflow.com/questions/45217189/run-angular-4-node-api-at-a-time

标签

node.js

angular

nodeapi