如何使用Angular Universal和Firebase Hosting为延迟加载路由配置服务器端渲染？

Question

我按照David East的tutorial创建了一个Angular Universal应用程序，并将其部署在Firebase托管上。我尝试过使用普通路由，这种方法可行，但是使用延迟加载路由时却无法正常工作。以下是查看页面源代码的屏幕截图， view page source 为什么在路由时无法正常工作？有人能告诉我如何配置服务器端渲染以支持延迟加载，或者分享任何相关链接吗？

- Karty

Answer 1

您可以查看官方Angular CLI文档中的此指南，了解如何在使用angular cli进行服务器端渲染时使懒加载起作用。这与您的视频教程中使用的方法相同。

不过，直到几天前为止，它底部还有以下声明：

注意事项

• 懒加载目前尚未支持，但即将推出。当前无法对惰性加载路由进行预渲染，您将会收到System is not defined错误。

如果您查看修订历史记录，您会发现它刚被更改为1.5.0-beta.4版本。可能需要升级您的 CLI 版本才能使其正常工作。

- Moema

Answer 2

我在这篇关于懒加载组件的文章中找到了解决方案： https://blog.khophi.co/angular-module-lazy-loading-like-pro/

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
    { path: '/', loadChildren: './home/home.module#HomeModule' },
    { path: 'about', loadChildren: './about/about.module#AboutModule'},
];

export const AppRouting: ModuleWithProviders = 
RouterModule.forRoot(appRoutes);

- Mouad Cherkaoui