Node/Express 和部署的 Angular 中的路由不起作用

Question

部署的 Angular 应用程序上的路由在由 Node 和 Express 提供服务时不起作用。我知道以前有人问过这个问题，但是我可能缺少一些让我发疯的东西。

Node运行的“express”文件夹中的文件结构大致如下：

express
├── controller.js
├── index.js
├── ngForm 
│   ...see below...
├── node_modules
│   ...
├── package.json
├── public
│   ├── file.json
│   └── rubric.html
├── router.js
├── ssl
    ├── cert.pem
    └── key.pem

Angular 项目在 ngForm 中：

ngForm 
├── angular.json
├── dist
│  └── rubric
│       ├── assets
│       ├── favicon.ico
│       ├── index.html
│       ├── main.js
│       ├── main.js.map
│       ├── polyfills.js
│       ├── polyfills.js.map
│       ├── runtime.js
│       ├── runtime.js.map
│       ├── styles.js
│       ├── styles.js.map
│       ├── vendor.js
│       └── vendor.js.map
├── e2e
├── node_modules
├── package.json
├── src
├── tsconfig.json
└── tslint.json

一些相关的Angular代码：

app.module.ts：

const appRoutes: Routes = [
  {path: '', redirectTo: '/rubric', pathMatch: 'full' }, 
  {path: 'rubric', component: RubricComponent},
  {path: 'rubricbuilder', component: RubricbuilderComponent},
  {path: '**', component: PageNotFoundComponent}
]

app.component.ts：

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.scss'],
  template: `<router-outlet></router-outlet>`
})

相关的Node.js代码：

server.js：

app.use(express.static("ngForm/dist/rubric"));
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'ngForm/dist/rubric/index.html'));
});

我确实在 ngForm 中从 Angular 项目运行了 ng build，并且输出在 ngForm/dist 中。

在 AngularProject 中运行 ng serve 时，我可以导航到 https://localhost:4200/rubric 和 https://localhost:4200/rubricbuilder 。

从节点我只能到达https://localhost:8000/，它将url重定向/更改为https://localhost:8000/rubric，但我无法启动https://localhost:8000/rubric本身或https://localhost:8000/rubricbuilder。通过探索角度路线并重新运行构建，我可以在 / 路线上制作 express show rubricbuilder，这会将 url 更改为https://localhost:8000/rubricbuilder。我错过了什么？

Answer 1

我对 Angular 不太熟悉，但这个问题与 VueRouter 有关。

因为您没有在 express 中间件中定义 /rubric 路由器，所以您可能会收到类似 404 NOT FOUND 的错误。

在 HTML5 历史模式下使用 SPA 路由器时，您需要对服务器进行额外配置，

例如，在每条路线上发送您的 SPA：

app.use(express.static("ngForm/dist/rubric"));
app.use((req, res) => {
  res.sendFile(path.join(__dirname, 'ngForm/dist/rubric/index.html'));
});

这可能不是 express 的最佳实践，您可以搜索其他解决方案，例如 VueRouter 建议使用 connect-history-api-fallback 和 express。