根路径无法正确呈现
Root path not rendering properly
我有一个 Angular 应用程序 Angular 通用以支持 Server-Side 渲染 (SSR)。我在根页面上有问题。所有其他路线在 SSR 上都能完美运行,但 "/" 却不行。 作为家庭路线的尝试,将“/”更改为“/app”并且它工作正常!。我正在使用 NestJS
并执行 Firebase
云函数来呈现它。以下文件是我认为可能导致问题的文件。
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
和 Firebase
Cloud Functions 上单独渲染 SSR 时测试 localhost
(见评论)。相同的行为。部署在 Firebase 上 - 具有相同的行为,当我检查它时,所有其他 views/paths 已在 View Page Source 中正确呈现 SSR 代码。我做了一些安全 headers 修改和出于好奇 运行 测试。不在 "/" 路径中呈现主页也会导致它们不适用,否则它可以正常工作!请在下面找到 2 个屏幕截图。它用于同一(主页)页面。
文件夹中的 tsconfig.json 等文件(名为 server)我要跳过的这两个文件在哪里,因为它应该没问题,tsconfig.server.json 和 main.server.ts 在 app[=58 中也是如此=] 文件夹(browser/core 代码所在的位置)。不会说 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 {}
我也查看了 repo https://github.com/Ismaestro/angular8-example-app
它在那里工作正常,但服务器在 Express 中,无法弄清楚我的代码有什么问题。
更新
On localhost
当我只使用 NestJS
进行渲染时效果很好。但是,Firebase
的 Cloud Functions 什么时候会发生变化,它不会。
问题是 index.html
,它没有重命名为 index2.html
(或其他任何名称)。仅当 index.html
被重命名时,Cloud Functions for Firebase 才会正确呈现根 /
路径。
我有一个 Angular 应用程序 Angular 通用以支持 Server-Side 渲染 (SSR)。我在根页面上有问题。所有其他路线在 SSR 上都能完美运行,但 "/" 却不行。 作为家庭路线的尝试,将“/”更改为“/app”并且它工作正常!。我正在使用 NestJS
并执行 Firebase
云函数来呈现它。以下文件是我认为可能导致问题的文件。
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
和 Firebase
Cloud Functions 上单独渲染 SSR 时测试 localhost
(见评论)。相同的行为。部署在 Firebase 上 - 具有相同的行为,当我检查它时,所有其他 views/paths 已在 View Page Source 中正确呈现 SSR 代码。我做了一些安全 headers 修改和出于好奇 运行 测试。不在 "/" 路径中呈现主页也会导致它们不适用,否则它可以正常工作!请在下面找到 2 个屏幕截图。它用于同一(主页)页面。
文件夹中的 tsconfig.json 等文件(名为 server)我要跳过的这两个文件在哪里,因为它应该没问题,tsconfig.server.json 和 main.server.ts 在 app[=58 中也是如此=] 文件夹(browser/core 代码所在的位置)。不会说 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 {}
我也查看了 repo https://github.com/Ismaestro/angular8-example-app 它在那里工作正常,但服务器在 Express 中,无法弄清楚我的代码有什么问题。
更新
On localhost
当我只使用 NestJS
进行渲染时效果很好。但是,Firebase
的 Cloud Functions 什么时候会发生变化,它不会。
问题是 index.html
,它没有重命名为 index2.html
(或其他任何名称)。仅当 index.html
被重命名时,Cloud Functions for Firebase 才会正确呈现根 /
路径。