Angular 9 - 生产环境构建下的懒加载未能正常工作

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 NODE版本为：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 （不工作）

- kashif azmi

---

“不工作”是什么意思？请说明错误。 - Philipp Meissner

@PhilippMeissner 我正在使用ng build --prod构建我的应用程序。 构建完成后，没有生成与模块相关的文件。 但是，如果我使用ng build进行构建，那么我可以在dist文件夹中看到模块文件。 在Angular 9的生产版本中是否存在任何问题？ - kashif azmi

Answer 1

因为在tsconfig.compilerOptions中将commonjs设置为模块，所以我遇到了同样的问题。通过改为esnext来解决。

修改前：

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

之后:

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

- German Arutyunov