Question

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

现在，应用编译良好，在本地环境中运行并进行调试或使用ng serve（或在生产模式下使用ng serve --prod（或ng build --prod来模拟行为）都不会显示错误，并且应用运行良好，并且我可以成功地从一个渴望加载的模块导航到一个延迟加载的模块，反之亦然，而不会出现错误。

问题：

如果我在服务器上运行该应用程序（因此使用app.module.ts (& app.routing.ts) |__lazy.module.ts (& lazymodule.routing.ts) |__admin.module.ts (& admin.routing.ts)然后发布它），则无法从第一个默认的预先加载的模块（主页）导航到延迟加载的模块。

错误堆栈

我在控制台中看到的错误如下：

错误：

错误错误：未捕获（承诺）：错误：平台设置后无法启用产品模式。错误：设置平台后无法启用产品模式。

在……首次尝试导航到任何延迟加载的模块时显示
错误：

错误错误：未捕获（承诺）：错误：在'./lazy/lazy.module'中找不到'LazyModule' 错误：在'./lazy/lazy.module'中找不到'LazyModule'

在以下情况下显示……在显示第一个错误后，我尝试再次导航至延迟加载的组件

一个有趣的事实是，当显示这些错误（尤其是第二个错误）时，它不会抛出未找到的错误404，而只是一个“正常”的Angular错误，没有任何404状态。< / p>

我的代码：

项目结构

// ... 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 });

app.routing.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);
    }
}

selective.strategy.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);

lazymodule.routing.ts

ng build --prod

版本：

服务器 Windows Server 2012 R2
IIS 8.5.9600.16384
角度/通用 6.1.5
角度和 angular-cli 6.1.4

我的尝试：

1）试图在本地执行ng serve --prod生成的文件。有用。
2）尝试使用useHash:true（本地）执行该应用程序，但似乎无济于事
3）尝试添加RouterModule.forRoot选项，如您在上面app.routing.ts文件的app.module.ts中所看到的。没用
4）试图在src/app/lazy/lazy.module#LazyModule文件中移动路由。没用
5）尝试使用根相对路径作为ng serve --prod。没用
6）试图在服务器文件夹中复制从if (any(test.df[,c(27:50)] <30)){ print("hi")}生成的文件，但是什么也没有。
7）试图更新我所有的npm软件包，但是什么也没有。

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

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

Answer 1

使用fat arror函数进行lazyLoading，因此无需担心模块路径

这是一个例子

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full',
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'lazy',     
    loadChildren: () => LazyModule,
    canLoad: [AuthGuard]
  },
  {
    path: 'admin',     
    loadChildren: () => AdminModule,
    canLoad: [AuthGuard]
  },
  { path: '**', redirectTo: '/dashboard', canActivate: [AuthGuard] }
];

Answer 2

我找到了一个临时解决方案。不幸的是，似乎永久性修复是角度小组需要解决的问题，因为这是生产构建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"
            }
          ]
        }
      }

请注意false for aot和build-optimizer

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

问题：

错误堆栈

我的代码：

版本：

我的尝试：

2 个答案: