根路径无法正确呈现

时间:2019-08-08 11:35:36

标签: angular firebase google-cloud-functions nestjs angular-universal

我有一个带有Angular Universal的Angular应用程序,以支持服务器端渲染(SSR)。我在根页面上有问题。所有其他路由都可以在SSR上完美运行,但“ /” 则不能。 尝试尝试将本地路由从“ /”更改为“ / app”,即可正常使用!。我正在使用NestJSFirebase Cloud Functions来渲染它。我认为以下文件可能会导致问题。

main.nest.ts

// These are important and needed before anything else.
import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import * as admin from 'firebase-admin';
import * as functions from 'firebase-functions';
import { AppNestModule } from './app.nest.module';
import { enableProdMode } from '@angular/core';
import { Express } from 'express';
import { ExpressAdapter } from '@nestjs/platform-express';
import { NestFactory } from '@nestjs/core';

enableProdMode(); // Faster server renders in production mode (development doesn't need it).

admin.initializeApp(); // Initialize Firebase SDK.

const server: Express = express(); // Create Express instance.

// Handle HTTP POST request and expose it on "req.body".
server.use(express.json());
server.use(express.urlencoded({ extended: true })); // Accept any type, "false" would mean accept only array or string.

// Create and init NestJS server based on Express instance.
const createNestServer = async (expressInstance: Express) => {
  const app = await NestFactory.create(
    AppNestModule,
    new ExpressAdapter(expressInstance)
  );

  app.init(); // Use when deploying to & testing with Firebase Cloud Functions.
  // await app.listen(4305); // Use when testing locally without Firebase Cloud Functions solely on NestJS.
};

createNestServer(server); // Create NestJS server.

// Firebase Cloud Function for Server Side Rendering (SSR).
exports.angularUniversalFunction = functions.https.onRequest(server);

app.nest.module.ts

import { AngularUniversalModule, applyDomino } from '@nestjs/ng-universal';
import { join } from 'path';
import { Module } from '@nestjs/common';

// Get working directory of client bundle.
// const BROWSER_DIR = join(
//   process.cwd(),
//   'functions',
//   'dist',
//   'apps',
//   'ditectrev-browser'
// ); // Use when testing locally without Firebase Cloud Functions solely on NestJS.
const BROWSER_DIR = join(process.cwd(), 'dist', 'apps', 'ditectrev-browser'); // Use when deploying to & testing with Firebase Cloud Functions.

applyDomino(global, join(BROWSER_DIR, 'index.html'));

@Module({
  imports: [
    AngularUniversalModule.forRoot({
      bundle: require('./../functions/dist/apps/ditectrev-server/main'), // Bundle is created dynamically during build process.
      liveReload: true,
      viewsPath: BROWSER_DIR
    })
  ]
})
export class AppNestModule {}

仅在NestJS上的Firebaselocalhost云函数上渲染SSR时进行了测试(请参阅注释)。相同的行为。部署在Firebase上-具有相同的行为,当我检查此设置时,所有其他视图/路径在 View Page Source 中均正确呈现了SSR代码。我做了一些安全头修改,并出于好奇心进行了测试。没有在“ /” 路径中呈现主页也会导致它们不适用,否则效果很好!请在下面找到2个屏幕截图。用于同一(主页)页面。

Correctly rendered home page with **app** path (and security headers works)

Home page doesn't render correctly with **/** path (and security headers works

文件夹(名为服务器)中的文件 tsconfig.json ,我跳过了这两个文件,这应该没问题,对于< app 文件夹(其中包含浏览器/核心代码)中的strong> tsconfig.server.json 和 main.server.ts 。不会说 app.server.module.ts (在 app 文件夹中)会导致此问题,但是这一点也许也值得分享。在下面:

import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { FlexLayoutServerModule } from '@angular/flex-layout/server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    AppModule,
    FlexLayoutServerModule,
    ModuleMapLoaderModule, // For lazy loading on SSR.
    ServerModule
  ]
})
export class AppServerModule {}

我还查看了仓库https://github.com/Ismaestro/angular8-example-app 在那里工作正常,但是服务器在Express中,无法弄清楚我的代码出了什么问题。

更新

localhost上,当我仅使用NestJS进行渲染时,效果很好。但是何时更改Firebase的Cloud Functions却没有。

1 个答案:

答案 0 :(得分:0)

问题是一个index.html,没有重命名为index2.html(或其他任何名称)。仅当index.html重命名后,Cloud Functions for Firebase才能正确呈现根/路径。