Firebase托管和seo上的Angular Universal延迟加载答案

【问题标题】：Angular5 Universal lazy loading on firebase hosting and seoFirebase托管和seo上的Angular Universal延迟加载
【发布时间】：2018-08-08 21:17:23
【问题描述】：

有人知道如何在 firebase 主机上进行延迟加载吗？一切正常，但是当我查看我网站的源代码时，我只看到路由器插座而不是文本等。我已将以下代码添加到函数文件夹内的 index.js 中：

extraProviders: [
  provideModuleMap(LAZY_MODULE_MAP)
]

我的 app.server.module 文件如下所示：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
imports: [
AppModule,
ServerModule
],
bootstrap: [AppComponent],
})
export class AppServerModule {}

但是当我在控制台中使用 firebase deploy 时，它已成功部署。但是，当我在那之后访问我的网站时，我收到一个错误和一个空白页面。

所以如果有人能指出我正确的方向，那就太棒了！

【问题讨论】：

嗨。你找到解决方案了吗？我正在努力解决同样的问题。
嗨菲尔。我目前切换到 rendertron。很酷的一点是您根本不需要服务器端渲染。看看这个：github.com/GoogleChrome/rendertron
感谢您的建议。请问您是否对 Rendertron 中延迟加载的 Angular-Modules 有任何问题？
您好 Phil，Rendertron 对延迟加载的模块没有任何问题。我相信只要您的页面加载时间不到 10 秒。
听起来很棒，谢谢。实际上，我现在已经在研究 Rendertron。您是否使用此github.com/AngularFirebase/E66-Angular-SEO-Rendertron 作为参考？你知道为什么这个项目使用原生服务工作者而不是来自 Angular 框架的代理/适配器吗？

标签： angular lazy-loading angular5 firebase-hosting angular-universal

【解决方案1】：

这可能是因为您的导入中缺少 ModuleMapLoaderModule 模块

app.server.module.ts

import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader'

@NgModule({
imports: [
AppModule,
ServerModule,
ModuleMapLoaderModule
],

延迟加载的路由似乎需要它：

ModuleMapLoaderModule 是一个允许延迟加载路由的服务器端模块。

https://angular.io/guide/universal#app-server-module

【讨论】：

嗨，大卫，感谢您的帮助。我已经将它添加到我的 app.server.module 中。这就是我的 index.js 在函数文件夹中的样子：` app.get('**', function (req, res) { renderModuleFactory(AppServerModuleNgFactory, { url: req.path, document: index, extraProviders: [ provideModuleMap (LAZY_MODULE_MAP) ] }).then(html => res.status(200).send(html)); });` 现在打开网站时出现此错误：错误 503 第一个字节超时
我真的不知道。您需要进行一些调试以查看失败的位置。请求是否到达您的 node.js 处理程序？它是否到达模块引导程序？它是否到达 AppComponent？以此类推
供您参考，我将其部署到 Firebase 托管。所以我不知道如何测试它。部署运行成功，但不知何故它就中断了。当我在没有 extraProviders 的情况下部署它时，它可以工作。