最近项目从AngularJs升级到Angular 5, 但是从网上查找了很多资料都没有很详细得说清楚如果将Angular5和Express集成的。不得不说学习一门新技术，虽说看官方文档很是必要，但是也只有在不断得踩坑中才能成长得更快。

一. 环境准备

1. 首先node开发环境：node 6.11.4，npm 3.10.10
2. Angular5: angular CLI 1.6.7
   npm安装： npm install -g @angular/cli
3. Express: express 4.16.2
   npm安装： npm install express --save

二. Angular 5项目准备

详细可看Angular官网
安装了Angular CLI之后，直接通过ng new my-app创建Angular 5的新项目，然后cd my-app 进入my-app目录， ng serve --o即可开启angular 服务器， 此时通过浏览器输入htpp://localhost:4200 便可访问初始化的angular项目。

三. 集成Express

在my-app项目的根目录下新建serve.js文件用于初始化Express项目：

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

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

app.listen(3100, function() {
    console.log("Express satart successfully");
});

打开package.json文件，将其中的ng start 命令改为：

"start": "ng build && node serve.js",

即通过ng build将angular5在项目build到默认目录dist中，随后通过node执行serve.js文件启动Express项目。此时浏览器中访问http://localhost:3100同样可以看到angular的初始化页面。

四. 踩的坑

从上述项目启动的流程可以看到将Angular5和Express集成在关键地方在于：serve.js中

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

这句代码涉及了Express中两个关键的API: app.use()和express.static(), 具体细节查看官网文档。
app.use()是express提供在中间件方法，它的第一个参数path默认是/, 即当浏览器中访问根目录http://localhost:3100下任意路径都将执行express.static(path.join(__dirname, 'dist'))方法。
express.static()是express提供的托管静态文件的方法，具体使用方法见官网, 这里不再赘述。

坑一：

express.static()第二个可选参数option的一个重要属性index, 它表示发送渲染index页面，如果设置成false, 则表示不渲染页面。它的默认值即为index.html,
在该项目中dist目录中的index.html则是Angular5项目build后的index.html, 所以启动Express项目后，页面渲染出Angular项目的初始页面。

坑二：

因为代码顺序执行，当执行到渲染页面的中间件方法后，后面所注册的中间件方法将不再被执行，例如：

app.use('/', function(req, res, next) {
    console.log("---before static---");
    next();
});
app.use(express.static(path.join(__dirname, 'dist')));
app.use('/', function(req, res, next) {
    console.log("---after static---");
    next();
});

该代码最后页面打印出的只有---before static---
而如果将index属性设置为false：

app.use('/', function(req, res, next) {
    console.log("---before static---");
    next();
});
app.use(express.static(path.join(__dirname, 'dist'), {index: false}));
app.use('/', function(req, res, next) {
    console.log("---after static---");
    next();
});

最后---before static---和---after static---都将会被打印。这是因为express中使用的 serve-static模块采用的机制是：

When a file is not found, instead of sending a 404 response, this module will instead call next() to move on to the next middleware, allowing for stacking and fall-backs.

那么如果只是加载静态文件，最终的页面将如何再被渲染呢？可以通过以下方法：

app.use('/', function(req, res, next) {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

如有理解不对之处，还望指出~
后面将继续更新关于Angular和Express学习笔记。