如何使用 express 的内部路由服务 angular nx 应用程序？

Question

我有 Node.js + Express 后端应用程序，其中包含一些静态路由、一些内部 (api) 路由和前端的 Angular 11 个应用程序。现在我正在尝试使用 nrwl nx 将前端重建为三个具有共享库的独立应用程序，但仍然使用快速路由。

当前版本使用一个静态路由来服务整个 angular 应用程序：

app.use("/", express.static(path.join(__dirname, "frontend")));

效果很好，但是当我尝试像

这样拆分路由时

app.use("/crm/admin/", express.static(path.join(__dirname, "crm-admin")));
app.use("/crm/moderator/", express.static(path.join(__dirname, "crm-moderator")));
app.use("/", express.static(path.join(__dirname, "client")));

我遇到了 angular 管理员或版主应用程序内部路由的问题 - 生产构建静态应用程序不会加载任何内容

如果我编辑索引基 href 以指向 /crm/admin/ 它仍然不会加载页面，原因相同

仅当我从应用程序加载的文件名中删除所有哈希值时但内部路由仍然存在问题：它提供了登录然后重定向的能力，因为它在 auth 效果中假设。但是任何其他路由都无法像在服务应用程序中那样工作并写入根路由：

path: '',
component: AppComponent,
children: [
  {
    path: 'login',
    component: AuthComponent,
  },
  {
    path: 'logout',
    component: AuthLogoutComponent,
  },
  {
    path: 'personal',
    loadChildren: () =>
      import('./components/personal/personal.module').then(
        (m) => m.PersonalModule
      ),
    canActivate: [AuthGuardService],
  },
  {
    path: 'orders',
    loadChildren: () =>
      import('./components/orders/orders.module').then(
        (m) => m.OrdersModule
      ),
    canActivate: [AuthGuardService],
  },
  {
    path: '**',
    redirectTo: 'personal',
    pathMatch: 'full',
  },
],

出于测试目的，我已经尝试将 crm-admin 文件夹指向“/”路径。它的工作原理与我用损坏的路由重现上面编写的步骤一样。

请指出我在使用内部路由构建 nx angular 应用程序并尝试从静态快速路由提供服务时遗漏了什么。如果可能的话，与将现有的 express 应用程序重建为 nx 控制的 express 应用程序非常不同。它按预期工作，无需任何更改。

提前致谢。

更新：

尝试添加这个

app.use("/crm/admin/", express.static(path.join(__dirname, "crm-admin")));
app.get("/crm/admin/", function (req, res) {
  res.sendFile(path.join(__dirname, "./crm-admin/index.html"));
});

并且不使用 --configuration=production 进行重建。在索引文件中修复基本 href 令牌后它可以工作，但仍然存在路由问题如果我尝试在浏览器地址栏中更改路径。

upd2:

如果我加上

"baseHref": "/crm/admin/",
"deployUrl": "/crm/admin/",

进入 angular.json 进入构建部分，构建的应用程序已经具有指向快速路由的基本 href 令牌，我希望它可以从 localhost:4201[= 本地提供服务49=] 但构建的应用程序中仍然存在路由错误。

Answer 1

嗯。谷歌搜索后，我在 Whosebug 上找到了答案。也许它对其他人有用。

如何使用 express 的内部路由服务 angular nx 应用程序？

How to serve angular nx app with internal routing from express?

node.js

express

ngrx

angular

nrwl-nx