Bundeled angular 2 app with express

0
votes

Ok so I bundled/built a regular angular cli project using webpack for prod and then took the contents of a dist folder and put them in another project with express installed.
code:

var express = require('express');
var app = express();
var path = require('path');

app.get('/', function(req, res) {
    res.sendFile(__dirname + '/' + 'index.html')
});

app.listen(3000, function() {
    console.log('Example app listening on port 3000!');
});

The problem is that when i run this i get a "loading..." page when on ://localhost:3000/ and nothing else. When I check console, I get these errors

[Failed to load resource: the server responded with a status of 404 (Not Found) ://localhost:3000/inline.js
Failed to load resource: the server responded with a status of 404 (Not Found) ://localhost:3000/styles.b52d2076048963e7cbfd.bundle.js
Failed to load resource: the server responded with a status of 404 (Not Found) ://localhost:3000/main.d27eab344e583f765067.bundle.js
Failed to load resource: the server responded with a status of 404 (Not Found) ://localhost:3000/styles.b52d2076048963e7cbfd.bundle.js
Failed to load resource: the server responded with a status of 404 (Not Found) ://localhost:3000/main.d27eab344e583f765067.bundle.js]

Anyone get around this or figure out the problem? any help is greatly appreciated. The reason i'm doing this is that once the app goes to production I don't have access to "npm" so i don't have any of the ang-cli commands but only node commands. Also implementing socket IO is another reason we went the express route. if there is any alternative way can you please let me know.

Thanks

2
node.jsweb-servicesexpressangularangular-cli

2 Answers

0
votes

You need to serve rest of the static files as right now you only send index.html.

Put your angular app in some directory, for example public and do this:

app.use(express.static('public'));
app.get('/', function(req, res) {
  res.sendFile(__dirname + '/public' + 'index.html')
});
0
votes

The solution I found for this problem is to put the 2 components in seperate directories, and build them this way (don't forget to change to your comp. directory before, each time) :

ng build --base-href /first/dist
ng build --base-href /second/dist

then you have your two components in two different directories

in express :

app.use(
    '/first',
    express.static(
        path.join(__dirname,'first', 'dist')
    )
);

and

app.use(
    '/second',
    express.static(
        path.join(__dirname,'second', 'dist')
    )
);

Their should be a better solution, but I haven't find it yet

Hope it helps

Gregoire - you can find working site with it on www.agenda.tools