Angular-cli: Angular Cli with server express

[lyminster]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   windows 10
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular cli beta 9
   node 6.3.1
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   im just creating a server using express js and want to run it via node main.js
   with main.js code like this

var express = require('express');
var app = express();
var http = require('http').Server(app);
var routes = require('./routes.js');

app.use("/src",express.static('src'));
app.use("/node_modules",express.static('node_modules'));



app.use('/', routes);



http.listen(9001, function(){
    console.log('listening on *:9001');
});

and with my routes.js file like this

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


var bodyParser = require('body-parser');
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
})); 

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


module.exports = app;

1. The log given by the failure. Normally this include a stack trace and some
   more information.
   but when im running it im always got an error say that unexpected token < an in index line "n"
   in import space with system-config.js
2. Mention any other details that might be useful.
   when im running ng serve in my angular cli there is no problem, my apps going well, but when im try from node its cannot get the index.html from angular2

[filipesilva]

Angular 2 is a front-end SPA framework, not a backend framework. The CLI is geared towards generating an Angular 2 app that will run on the browser, while Express is a backend framework that runs on the server.

I would suggest that you build your backend server and your frontend app separately, and have your Angular 2 app communicate via HTTP to your backend server.

[zaunermax]

the point of this question is, to get a solution how to program a simple server, that can serve the ng build --prod output, i was wondering the same and could not find a solution

[JanStureNielsen]

@Maxincredible52: If you're looking for a history.pushState capable Express server for your Angular 2 application, you might be interested in this: http://stackoverflow.com/questions/40142130/configure-history-pushstate-for-angular-2

[zaunermax]

@JanStureNielsen @lyminster i found a solution, first you have to statically serve the files from your dist folder and then after this you have to redirect all requests to your index html. I was failing because i didn't think both (static serving and the request redirection) would be necessary.

[hackerunet]

Can someone give me more information about this? I've got angular-cli installed and using yeoman to scaffold the application, the issue here is that I need angular in the front, nodejs in the backend and node communicating with firebase, so I found a generator to create the angular application but this doesn't suite our need to have both elements running in the same server but only one server serving both applications.
So any documentation available ??
thanks

[fjlogrono]

I'm trying the same, I've read something out there, but it does not work for me. Have you got something?

I have tried with this:
app.use(express.static(path.join(__dirname, 'dist')));

// Send all other requests to the Angular app
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});

[fjlogrono]

I already got it, try this:

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

// Send all other requests to the Angular app
app.get('*', function (req, res, next) {
res.sendFile('dist/index.html', { root: __dirname });
});

[denzel94]

But what about this
`app.use('*', index);

app.get('/api/news', newsController.all);`

when i need get json from /api/news i get html code of index page....
any ideas?

[fjlogrono]

I do not know for sure, I guess it's in order. I first have the calls to the API, and the rest, if they do not correspond to the API, call the pages.

const api = require ('./routes')
...

// use the forward slash with the module api api folder created routes
app.use('/api',api)

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

// Send all other requests to the Angular app
app.get('*', function (req, res, next) {
res.sendFile('dist/index.html', { root: __dirname });
});

Try putting app.use('*', index); after app.get('/api/news', newsController.all);

[denzel94]

ohhhhhhh i understand, i change lines like
app.get('/api/news', newsController.all);
app.use('*', index);

and everythink work! thanks!!!!!

[fjlogrono]

I'm glad!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}