Angular2: How to go from an "ng serve" hosting to a Node.Js hosting

Question

I've made my first Angular2 application, while using ng servefor hosting. Now I've to add some backend(because I need some small server logic).

I've found this who basically explain me how to host an angular 2 app on nodeJs. But ng serve was doing a lot of things, checking the changes, bundling the differents JS/CSS files, injecting angular into my template, getting my dependencies.

I cannot just "generate" angular web site and then, since I've to update the angular part to get the data from the web api and work with it.

So what should I do to switch from ng serve to an nodeJS?

EDIT: Viewing the answer, I must not have been clear enough. My angular JS is not an application that will on client ONLY, I've done some part of it(navigation, some form, ...) but now I need to host a server with web service and websocket to continue the work. It's not about deploying this to a productive server. It's about to moving to an environnement that allow me to work on the server and the client side.

Answer 1

I think I finally understood your question:

• Instead of using the devserver bundled with angular-cli (ng serve), you want to use your own Node.js-powered server.
• Also, you DON'T WANT TO STATICALLY BUILD your app (ng build). You want to serve the live build (which has to be generated automatically by the server).

Here's how you can do it:

1) Watch, transpile, bundle...

Webpack is perfect for that.

Create a webpack config file with the right settings for an Angular app. Here's an example from angular2-webpack-starter: webpack.dev.js.

The example is bit verbose. Just keep in mind the config file is where you tell webpack how to handle .ts files, what bundle(s) it should generate, etc.

2) Serve the bundle(s) generated by webpack with a Node.js server

I see two options, depending on how much control you want:

2a. Use webpack-dev-server (not a lot of control)

webpack-dev-server --config config/webpack.dev.js --watch src/

You can see that the webpack-dev-server uses the config file previously mentioned.

Again, you can see an example of the full command to run in angular2-webpack-starter's package.json file.

2b. Create your own server (a lot of control)

You could create a Node.js/Express server using the webpack-dev-middleware, to which you would feed the config file created in step #1.

The middleware is the magic link that will let you serve the files emitted from webpack over the Express server.

Example of a Node.js/Express server which uses the webpack-dev-middleware: srcServer.js.

Does that answer your question?

Answer 2

I know this is an old question but I am just having this same concern and I found ngserve proxy option useful. In development you can run node on another port then calls to /api get redirected through to node.js.

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

package.json gets: "start": "ng serve --proxy-config proxy.conf.json",

then make a proxy.conf.json file like this { "/api": { "target": "http://localhost:3000", "secure": false, "pathRewrite": { "^/api": "" } } }