部署后 Angular 无法路由到延迟加载的模块

Question

我最近发布了一个新的 Angular 应用程序，它实现了延迟加载。

现在，应用程序编译顺利，没有错误显示并在本地环境中运行它进行调试或使用 ng serve(或 ng serve --prod 来模拟在生产模式下的行为)应用程序运行良好，我可以成功地从一个急切加载的模块导航到一个延迟加载的模块，反之亦然，没有错误。

---

问题:

如果我在服务器中运行该应用程序(因此使用 ng build --prod 然后发布它)，我无法从第一个默认预加载模块(主页)导航到延迟加载模块。

---

错误堆栈

我在控制台中得到的错误如下:

1. 错误:

   ERROR Error: Uncaught (in promise): Error: Cannot enable prod mode after platform setup. Error: Cannot enable prod mode after platform setup.

   在...时显示第一次尝试导航到任何延迟加载的模块

2. 错误:

   ERROR Error: Uncaught (in promise): Error: Cannot find 'LazyModule' in './lazy/lazy.module' Error: Cannot find 'LazyModule' in './lazy/lazy.module'

   在...时显示在出现第一个错误后，我尝试再次导航到延迟加载的组件

一个有趣的事实是，当显示这些错误时(特别是第二个)，它不会抛出错误 404 not found，它只是一个没有任何 404 状态的“正常”Angular 错误。

---

我的代码:

项目结构

app.module.ts (& app.routing.ts)
|__lazy.module.ts (& lazymodule.routing.ts)
|__admin.module.ts (& admin.routing.ts)

app.routing.ts

// ... imports …
const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full',
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'lazy',     
    loadChildren: "./lazy/lazy.module#LazyModule",
    canLoad: [AuthGuard]
  },
  {
    path: 'admin',     
    loadChildren: "./admin/admin.module#AdminModule",
    canLoad: [AuthGuard]
  },
  { path: '**', redirectTo: '/dashboard', canActivate: [AuthGuard] }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { preloadingStrategy: SelectiveStrategy, useHash:true });

selective.strategy.ts

// ... imports ...
@Injectable()
export class SelectiveStrategy implements PreloadingStrategy {

    preload(route: Route, load: Function): Observable<any> {
        if (route.data && route.data['preload']) {
            return load();
        }
        return Observable.of(null);
    }
}

lazymodule.routing.ts

const routes: Routes = [
  { path: '', component: FooComponent, canActivate: [AuthGuard] },
  {
    path: 'foo',
    component: FooComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'new',
    component: NewElementComponent,
    canActivate: [AuthGuard]
  },
  { path: '**', redirectTo: '/dashboard', canActivate: [AuthGuard] }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

---

版本:

服务器 Windows Server 2012 R2
IIS 8.5.9600.16384
Angular/通用 6.1.5
angular & angular-cli 6.1.4

---

我的尝试:

1) 尝试在本地执行 ng build --prod 生成的文件。有用。
2) 尝试使用 ng serve --prod 执行应用程序(本地)，但似乎没有任何效果
3) 尝试添加 useHash:true 选项，如您在 app.routing.ts 文件的 RouterModule.forRoot 中所见多于。没用。
4) 试图将路由移动到 app.module.ts 文件中。没用。
5) 尝试使用根相对路径作为 src/app/lazy/lazy.module#LazyModule。没用。
6) 试图将 ng serve --prod 生成的文件复制到服务器文件夹中，但什么也没有。
7) 试图更新我所有的 npm 包，但没有。

---

我做错了什么？是代码问题还是服务器问题？

如果您需要更多信息/代码部分，请告诉我

Answer 1

我找到了一个临时解决方案。不幸的是，似乎永久性修复是 Angular 团队必须处理的事情，因为这是生产构建 aot 和构建优化器的问题。

现在，您必须禁用 aot 和构建优化。您可以在命令行上的两个位置之一执行此操作，以获得一次性效果:

ng build --prod --aot=false --build-optimizer=false

或者为了在您的 angular.json 中产生永久效果，将您的生产配置更改为:

"configurations": {
        "production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": false,
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ]
        }
      }

注意 aot 和构建优化器的 false