I can not run an Angular2 app hosted with a Node.js/Express


#1

Angular 2 is running in the port 8081 and node.js express in port 8080 but I can not call my index.HTML in the 8080 and parse the angular 2. I wached many videos people installing express than angular 2 and coping the index.HTLM under src/app in the index.HTML in views folder when starts the node.js server and gets angular. Installation process…
1. Created the “blank” workspace in the cloud 9
1.1 Updated enviroment in cloud 9
Get the latest node.js
nvm install node nvm use 7.5.0
nvm alias default v7.5.0 Update npm. npm install -g npm

2. Installed Express globally
npm install -g express-generator Create the app: express --view=ejs -f .
Install dependencies:
$ npm install
2.1. Added the cloud 9 port
app.listen(process.env.PORT, function () {
console.log('App listening in port: ’ + process.env.PORT);
});

2.2. Started the server
$ node app

3.Then install the Angular-CLI globally
npm install -g angular/cli ng new client
cd client ng serve --host 0.0.0.0 --port 8081 --live-reload-port 8080

app.js

var express = require(‘express’);
var path = require(‘path’);
var logger = require(‘morgan’);
var cookieParser = require(‘cookie-parser’);
var bodyParser = require(‘body-parser’);

var index = require(’./routes/index’);
var users = require(’./routes/users’);

var app = express();

// view engine setup
app.set(‘views’, path.join(__dirname, ‘/client/views’));
app.set(‘view engine’, ‘ejs’);
app.engine(‘html’, require(‘ejs’).renderFile);

app.use(logger(‘dev’));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, ‘client’)));

app.use(’/’, index);
app.use(’/users’, users);

app.listen(process.env.PORT, function () {
console.log('Start server in port: ’ + process.env.PORT);
});

module.exports = app;



#2

It is already working based on this recommendations…
Use angular cli to build angular 2 project the ng build -- prod to build for production of your angular 2 project.
Then copy the contents of build folder and paste into node server views folder.
And change your node server view engine configuration.
Then start the node server not angular server.

Instead of ng serve in the step 3 above, I run the command ng build --prod then created the folder “dist” and I copied the content to inside of “views” folder in node.
I just changed one line in “app.js”:
app.use(express.static(path.join(__dirname, 'views')));

when I started the node server by “$node app” then I got the angular first page “app works!”.


#3

thank you for the help. This is the true solution