Angular 5路由点击跳转正常，直接访问/刷新报Cannot GET /books求助

嘿，这可不是Angular的bug哦，是单页应用（SPA）前端路由的常见小问题，我来帮你捋清楚原因和解决办法：

为什么会出现这个问题？ #

Angular是单页应用，所有路由都是在浏览器前端处理的。当你点击页面里的“books”链接时，Angular的Router会拦截这个请求，不用刷新页面就能加载对应的Books组件。但你直接在地址栏输入localhost:4200/books或者刷新页面时，浏览器会直接向服务器发送GET /books的请求——而你的服务器根本没有这个路径对应的文件，自然就返回Cannot GET /books的错误啦。

怎么解决？ #

1. 开发环境（用Angular CLI的ng serve） #

如果你是用Angular CLI自带的开发服务器，先检查index.html里的<base href="/">标签是否正确（默认应该就是这个）。如果还是有问题，启动服务时可以加上--base-href参数：

ng serve --base-href /

另外再核对下你的路由配置，确保BooksComponent已经正确注册到路由模块里，路径设置的是path: 'books'哦。

2. 生产环境/自定义服务器 #

要是你部署到生产环境，或者用了其他服务器（比如Nginx、Apache、Express），就得配置服务器把所有请求都重定向到index.html，让Angular Router来处理路由：

• Nginx：在配置文件里加这段：

location / {
  try_files $uri $uri/ /index.html;
}

• Apache：创建或修改.htaccess文件：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

• Express.js：用connect-history-api-fallback中间件：

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

// 处理路由重定向
app.use(history());
// 托管静态文件
app.use(express.static(__dirname + '/dist'));

app.listen(4200, () => {
  console.log('服务器运行在4200端口');
});

对了，你用的Firefox 52.5版本对前端路由的支持完全没问题，所以不用怀疑浏览器的问题哦~

内容的提问来源于stack exchange，提问作者Rizki Hadiaturrasyid