如何使 angular2 路由与快速路由器一起使用？答案

【问题标题】：How to make angular2 routing work with express router?如何使 angular2 路由与快速路由器一起使用？
【发布时间】：2017-09-20 07:37:32
【问题描述】：

我试图在同一台服务器上使用 angular2 应用程序托管我的快速休息服务。在阅读了各种相关帖子后，我发现各种解决方案都可以在本地服务器上运行 http://localhost:3000 但是当我在 Heroku 上托管我的应用程序时，我尝试访问我的快速路由以 /api/... .但无法访问 angular2 UI 页面，它开始在页面上显示 Not Found 消息。

app.all('*', (req, res) => {
  console.log(`[TRACE] Server 404 request: ${req.originalUrl}`);
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

或

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

或

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

或

app.get(/^\/([^a]|a[^p]|ap[^i]|api[^/]).*$/,(req,res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

【问题讨论】：

什么是“我尝试访问我的快速路由以 /api/ 开头...一切正常。但无法访问 angular2 UI 页面它开始在页面上显示 Not Found 消息。”意思是？什么不工作？
它没有显示我的 angular2 应用登录页面。
根据您提供的信息几乎不可能猜出错误是什么。请分享您的文件夹结构和路由详细信息，如果不是私有的，请分享您的 heroku url
当我将我的应用程序推送到 heroku git 时，我发现了问题。它没有将包含 angular2 app 编译构建的 dist 目录上传到 heroku 服务器。我在你的问题中找到了答案。
那么问题解决了吗？太棒了。

标签： angular express heroku angular2-routing

【解决方案1】：

当我在托管服务器上部署我的应用程序时，我发现 dist 目录没有部署在包含运行 ng build --prod 后创建的 Angular 应用程序构建的服务器上。

首先，我手动将其上传到托管服务器，我的应用程序开始正常工作。然后我想到每次都是手动任务，所以我为这个问题找到了两个解决方案。

首先，从 .gitignore 文件中删除 /dist 条目，这意味着当我将应用程序推送到任何托管服务器时，它不会忽略 dist 目录。
其次，我从此链接 https://docs.npmjs.com/misc/scripts 阅读了 package.json 文档，了解了安装前和安装后脚本，并更新了我的 package.json 文件以包含以下脚本。
```
"scripts": {
   "ng": "ng",
   "start": "node index.js",
   "build": "ng build",
   "test": "ng test",
   "lint": "ng lint",
   "e2e": "ng e2e",
   "postinstall": "ng build --prod"
},
```

阅读本文以在 heroku https://paucls.wordpress.com/2016/11/25/deploy-angular-2-cli-app-to-heroku/ 上进行部署

【讨论】：