How to add express into angular-starter?

Question

I have been developing my angular2 app with webpack and angular using webpack-dev-server from here: https://github.com/AngularClass/angular-starter

I want to use express to run the application, what is the simplest way I can get there? I have npm installed express already.

You can create `index.js` file in your project root dir, implement your own express server and execute it via `node index.js` — embarq, Jun 20 '17 at 22:17
it might be helpful [github](https://github.com/thangavel28/studentlogin) — thangavel .R, Jun 30 '17 at 04:46
I am looing for guidance on what to do with angular-starter, not angular-cli. (to add express in) — Rolando, Jun 30 '17 at 04:59

score 5 · Accepted Answer · answered Jul 01 '17 at 10:12

Here is a demo file for your Express app:

server/server.js:

const express = require("express");
const app = express();
const bodyparser = require("body-parser");
const json = bodyparser.json;
const http = require('http').Server(app);
const urlencoded = bodyparser.urlencoded;
const path = require("path");

app.use(json());
app.use(urlencoded({
    extended: true
}));
app.use(express.static(__dirname + '/../dist'));

app.get('/test', (req, res) => {
    /* when using webpack-dev-server we are using webpack's url 
       so we need to set headers for development i.e npm run server:dev:hmr 
    */
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

    return res.json({
      code: '0',
      msg: 'Successfully called test API'
    })
})

/* Only for production i.e:  - All others are to be handled by Angular's router */
app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname + '/../dist/index.html'));
});

http.listen(3001, function() {
    console.log(`App started on port 3001`)
})

Start the server by using node start server/server.js in one terminal and npm run server:dev:hmr in another.

Calling the API from home.component.ts :

public ngOnInit() {
    console.log('hello `Home` component');
    /**
     * this.title.getData().subscribe(data => this.data = data);
     */
    this.http.get('http://localhost:3001/test')
    .map(res => res.json())
    .subscribe(data => console.log("data received", data))
}

You can see in your network tab of developer tools that a request has been made to the server.

Now you can execute npm run build:prod and all your content will still be served from the dist directory.

When I run npm start to start the application in webpack-dev-server, I don't see any "dist" directory. Where is the dist directory coming from in angular-starter? — Rolando, Jul 04 '17 at 15:21

score 2 · Answer 2 · answered Jun 20 '17 at 18:23

2

Express on top on node.js is a tool that allows you to build quickly back end rest servers.

Angular is the Front End framework.

From an application developed with Angular you can call http rest services which are exposed using Express. Apart from this there is no other relationship between Angular and Express, as there is no relationship between Angular and any server which exposes http services.

answered Jun 20 '17 at 18:23

Picci

16,775
13
70
113

I might be missing something but, based on the angular-starter... how do I configure express to use what I am building in my code? Look for more specifics. AFAIK I don't see any directory the code is being copied into. – Rolando Jun 22 '17 at 03:52
What do you want to do with express? – Picci Jun 22 '17 at 07:23
To have it be the server so I don't have to use webpack-dev-server. I want to add passport to support auth. – Rolando Jun 28 '17 at 04:07
You may want to take a look at this [link](https://stackoverflow.com/questions/39744309/node-http-server-to-respond-with-index-html-to-any-request) – Picci Jun 28 '17 at 07:07

score 2 · Answer 3 · answered Jul 02 '17 at 11:38

2

For angular 2.X.X :

AngularClass has also created a seed project using express/universal

https://github.com/angular/universal-starter

For angular 4.X.X Use angular platform server

https://github.com/ng-seed/universal

answered Jul 02 '17 at 11:38

Deepak Kumar

1,669
3
16
36

I am not looking for another seed project, I am looking to find out how to add express to the "angular-starter" project. – Rolando Jul 03 '17 at 17:44

How to add express into angular-starter?

3 Answers3

Linked