2017-02-17 4 views
0

Я, вероятно, что-то пропустил здесь, но мне уже потребовалось 3 дня, пытаясь исправить это ... любая идея будет большой помощью! Угловой 2 работает в порту 8081, а node.js выражается в порту 8080, но я не могу назвать свой индекс.HTML в 8080 и получить угловое 2. Я смотрел много людей, которые устанавливали экспресс, затем клонировали угловыми 2, после чего они могут копировать index.HTLM-код под «src/app /» и вставлять в index.HTML в папку «views», а затем запускать сервер node.js, они могут получить угловые значения. Вы можете следить шаг за шагом процесс установки ниже ...Я не могу запустить приложение Angular2, размещенное с помощью Node.js/Express в облаке 9

1. Создал «пустой» рабочее пространство в облаке 9

1,1 Обновлено окружающая среда в облаке 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. Установленный экспресс глобально

$ npm install -g express-generator 
Create the app: 
$ express --view=ejs -f . 
Install dependencies: 
$ npm install 

3.Then установить угловую-CLI глобально

$ npm install -g angular/cli 
$ ng new client 
$ cd client 
$ ng serve --host 0.0.0.0 --port 8081 --live-reload-port 8080 

Папки структуру:

enter image description here

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; 

index.js

var express = require('express'); 
var router = express.Router(); 

/* GET home page. */ 
router.get('/', function(req, res, next) { 
    res.render('index.html'); 
}); 

module.exports = router; 

index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Angular QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <base href="/"> 
    <link rel="stylesheet" href="styles.css"> 

    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 

    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 

    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('main.js').catch(function(err){ console.error(err); }); 
    </script> 
    </head> 

    <body> 
    <my-app>Loading AppComponent content here ...</my-app> 
    </body> 
</html> 

app.component.ts импорта {Компонент} от '@ угловая/сердцевина';

@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello {{name}}</h1>`, 
}) 
export class AppComponent { name = 'Angular'; } 

С 2 серверов и работает ...

Порт: 8080 и Порт: 8081 enter image description here

ответ

1

Используйте угловые кли построить угловой 2 проекта, то нг сборки - prod, чтобы построить для производства вашего углового проекта 2. Скопируйте содержимое папки сборки и вставьте в папку представлений сервера узлов. И измените конфигурацию ядра сервера узлов. Затем запустите сервер узлов, а не угловой сервер.

  • Обновление углового кли
+0

Он отлично работает .... спасибо! – CarlosE

+0

Когда я запустил команду ng build -prod, тогда создал папку «dist», и я скопировал содержимое внутри папки «views» в узле. Я просто изменил одну строку в «app.js» 'app.use (express.static (path.join (__ dirname, 'views'))); ', когда я запустил сервер узлов с помощью приложения $ node и получил угловую первую страницу« приложение работает! ». Большое спасибо! Вы спасли меня много времени ... – CarlosE

+0

Добро пожаловать, :) Я думаю, вы можете принять это как ответ. –

Смежные вопросы