Question

我一直在使用webpack-dev-server从webpack开发我的angular2应用程序：https://github.com/AngularClass/angular-starter

我想用express来运行应用程序，我能到达那里最简单的方法是什么？我已经安装了npm express。

Answer 1

以下是Express应用的演示文件：

服务器/ server.js：

const express = require("express");
const app = express();
const bodyparser = require("body-parser");
const json = bodyparser.json;
const http = require('http').Server(app);
const urlencoded = bodyparser.urlencoded;
const path = require("path");

app.use(json());
app.use(urlencoded({
    extended: true
}));
app.use(express.static(__dirname + '/../dist'));

app.get('/test', (req, res) => {
    /* when using webpack-dev-server we are using webpack's url 
       so we need to set headers for development i.e npm run server:dev:hmr 
    */
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

    return res.json({
      code: '0',
      msg: 'Successfully called test API'
    })
})

/* Only for production i.e:  - All others are to be handled by Angular's router */
app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname + '/../dist/index.html'));
});

http.listen(3001, function() {
    console.log(`App started on port 3001`)
})

在一个终端中使用node start server/server.js，在另一个终端中使用npm run server:dev:hmr启动服务器。

从home.component.ts调用API：

public ngOnInit() {
    console.log('hello `Home` component');
    /**
     * this.title.getData().subscribe(data => this.data = data);
     */
    this.http.get('http://localhost:3001/test')
    .map(res => res.json())
    .subscribe(data => console.log("data received", data))
}

您可以在开发人员工具的网络标签中看到已向服务器发出请求。

现在您可以执行npm run build:prod，所有内容仍将从dist目录提供。

Answer 2

在node.js上的Express是一个允许您快速构建后端休息服务器的工具。

Angular是前端框架。

从使用Angular开发的应用程序中，您可以调用使用Express公开的http rest服务。除此之外，Angular和Express之间没有其他关系，因为Angular和任何公开http服务的服务器之间没有任何关系。

Answer 3

适用于角度2.X.X：

AngularClass还使用express / universal

创建了一个种子项目

https://github.com/angular/universal-starter

适用于角度4.X.X 使用角平台服务器

https://github.com/ng-seed/universal

如何将快速添加到角度启动器？

3 个答案: