首页 > 解决方案 > 如何通过 express 的内部路由为 angular nx 应用程序提供服务?

问题描述

我有 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")));

我在管理员或版主应用程序中遇到了角度路由问题 - 生产构建静态应用程序不会加载任何内容如此处所示

如果我编辑 index base href 以指向 /crm/admin/ 它仍然不会出于同样的原因加载页面在此处输入图像描述

仅当我从文件名应用程序加载中删除所有哈希在此处输入图像描述但仍然存在内部路由问题时:它可以登录然后重定向,因为它假定在身份验证效果中。但是任何其他路由都无法像在服务应用程序中那样工作并用根路由编写:

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 令牌后,它可以工作,但如果我尝试更改浏览器地址栏中的路径,路由仍然存在问题。

更新2:

如果我添加

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

进入 angular.json 进入构建部分,构建的应用程序已经有指向快速路由的基本 href 令牌,我希望它从本地服务,以及它从 localhost:4201/crm/admin 本地服务,但路由错误仍然存​​在于构建应用程序。

标签: node.jsangularexpressngrxnrwl-nx

解决方案


好。谷歌搜索后,我在stackoverflow上找到了答案。也许它对其他人有用。


推荐阅读