【发布时间】：2017-02-19 10:29:56
【问题描述】：
我可能在这里遗漏了一些东西，但我已经花了 3 天时间试图解决这个问题......任何想法都会有很大帮助！ Angular 2 在端口 8081 中运行，node.js 在端口 8080 中运行，但我无法在 8080 中调用我的 index.HTML 并获取 angular 2。我观看了许多视频，人们安装 express 然后克隆 angular 2，之后他们是能够复制“src/app/”下的 index.HTLM 代码并将 index.HTML 粘贴到“views”文件夹中，然后启动 node.js 服务器，他们可以获得角度。 您可以按照下面的逐步安装过程...
1.在云端创建“空白”工作区 9
1.1 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。全球安装 Express
$ npm install -g express-generator
Create the app:
$ express --view=ejs -f .
Install dependencies:
$ npm install
3.然后全局安装Angular-CLI
$ 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;
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 从'@angular/core'导入{组件}；
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent { name = 'Angular'; }
有 2 台服务器启动并运行...
端口：8080和端口：8081 enter image description here
【问题讨论】：