0

我有一个角度应用程序，我在其中一个名为“security”的模块中使用延迟加载，我在 app.routing.module.ts 的路由数组中提到过

const routes: Routes = [ 
{path:'path1',component:Path1Component},
    {path:'smotherRoute',component:SmOtherRouteComponent},
{ path: 'security', loadChildren: () => import('./components/security/security.module').then(m => m.SecurityModule) },

]

文件夹结构是

src/应用程序/组件/安全

src/app/components/smotherRoute

源代码/应用程序/组件/...

安全模块有 routing.modules.ts 和 module.ts、component.ts、component.html

src/app/components/security/security.component.ts

src/app/components/security/security.component.html

src/app/components/security/security.module.ts

src/app/components/security/security.routing.ts

在 security.component.html 中

  <router-outlet></router-outlet>

security的路由模块在security.module.ts中导入

Imports :[ SecurityRoutingModule,]

security.routing.module.ts 中提到了安全模块的路由

const routes: Routes = [{ path: '',  component: SecurityComponent  , children: [
{path: 'child1', component: Child1Component},
{path: 'child2', component: Child2Component}]

当我尝试通过浏览器访问应用程序安全模块时，它抛出如下错误：

运行时编译器加载失败

或者

加载 chunk1 或 chunk3 失败

但是，这可以使用 npm run serve /ng serve 命令工作，这些错误仅在尝试使用“npm run build:single-spa”时才会出现。（顺便说一句，我正在使用单水疗库。）

包.json：

4

1 回答 1

0

这个问题可能有很多原因，就我而言，问题在于路由，我没有提供正确的路由。就我而言，我正在使用的这个 anglar 应用程序是一个微型应用程序，因此它在另一个映射路由的应用程序中被调用。从主容器应用程序，我正在访问 http://ip:port/childAPP1/security/child1

由于此路径中提到的所有路径都被视为来自主应用程序的子应用程序，因此我需要将此模块的所有路由作为微应用程序的子应用程序提供，并具有此微应用程序的正确路径名称 app.routing.module.ts，即喜欢 ..

app.routing.module.ts

不确定这是否是主要原因，但是这如何为我解决了这个问题，所以如果延迟加载模块抛出错误“运行时编译器加载失败”，使用的路由会出现一些错误。

于 2021-09-01T17:26:48.597 回答