サーバーサイドレンダリング(SSR)をサポートするAngularUniversalを備えたAngularアプリケーションを使用しています。ルートページに問題があります。他のすべてのルートはSSRで完全に機能しますが、「/」は機能しません。ホームルートを試してみると、「/」が「/ app」に変更され、正常に動作します!! 。私が使用NestJS
していて、Firebase
CloudFunctionsが実行されてレンダリングされます。以下のファイルは私が問題を引き起こすかもしれないと思うものです。
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 {}
SSRをオンのみでレンダリングしNestJS
、Firebase
クラウド機能をオンにするときにテストされましたlocalhost
(コメントを参照)。同じ振る舞い。Firebaseにデプロイ-同じ動作をします。これを確認したときに、他のすべてのビュー/パスがビューページソースでSSRコードを正しくレンダリングしました。私はいくつかのセキュリティヘッダーの変更を行い、好奇心のためにテストを実行しました。「/」パスでホームページをレンダリングしないと、それらが適用されない原因にもなります。それ以外の場合は正常に機能します。以下の2つのスクリーンショットを見つけてください。同じ(ホームページ)ページ用です。
Files such as tsconfig.json in a folder (named server) where are these 2 files I'm skipping, as it should be fine, the same for tsconfig.server.json and main.server.ts in app folder (where browser/core code is). Wouldn't say that app.server.module.ts (in app folder) causes the problem, but this one maybe it's also worth to share. It's below:
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 {}
I also took a look into the repo https://github.com/Ismaestro/angular8-example-app There it works fine, but the server is in Express and couldn't figure out what's wrong with my code.
UPDATE
でlocalhost
、私が使用してレンダリングしていたときにのみ、NestJS
作品の罰金です。しかし、Cloud Functionsでいつ変更されるかは、変更されFirebase
ません。
問題は、index.html
に名前が変更されなかったindex2.html
(または他の何か)でした。名前index.html
が変更された場合にのみ、Cloud Functions forFirebaseは/
ルートパスも適切にレンダリングします。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加