Question

我正在Angular 9上的一个应用程序上工作，并实现了某些模块的延迟加载。配置如下：

package.json：`“ dependencies”：{ “ @ agm / core”：“ ^ 1.1.0”， “ @ angular / animations”：“〜9.1.0”， “ @ angular / common”：“〜9.1.0”， “ @ angular / compiler”：“〜9.1.0”， “ @ angular / core”：“〜9.1.0”， “ @ angular / forms”：“〜9.1.0”， “ @ angular / platform-browser”：“〜9.1.0”， “ @ angular / platform-browser-dynamic”：“〜9.1.0”， “ @ angular / router”：“〜9.1.0”，

“ devDependencies”：{ “ @ angular-devkit / build-angular”：“〜0.901.0”， “ @ angular / cli”：“〜9.1.0”， “ @ angular / compiler-cli”：“〜9.1.0”，`

Angular CLI：9.1.5 节点：12.16.3

路由代码在这里：

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  },
  {
    path: 'resident',
    loadChildren: () => import('./modules/resident/resident.module').then(rm => rm.ResidentModule)
  },
  {
    path: 'supervisor',
    loadChildren: () => import('./modules/oclm-supervisor/oclm-supervisor.module').then(sup => sup.OclmSupervisorModule)
  },
  // otherwise redirect to login page
  { path: '**', redirectTo: '' }
];

子路由在这里：

const routes: Routes = [
{
path: '',
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'bashboard'
},
{
path: 'bashboard',
component: DashboardComponent
}]
}]

这在本地环境中运行良好，但是当我尝试使用--prod构建项目并在生产环境中发布构建时。则路由不起作用。适用于本地：http://localhost:4200/resident（有效）保护：http://abxxxx.com/resident（不起作用）

Answer 1

由于在 tsconfig.compilerOptions 中将 commonjs 设置为模块，因此遇到了同样的问题。通过更改为 esnext 修复

之前：

{
    "compilerOptions": {
        "module": "commonjs"
        ...
    }
    ...
}

之后：

{
    "compilerOptions": {
        "module": "esnext"
        ...
    }
    ...
}

Angular 9-延迟加载在生产版本中不起作用

1 个答案: