ルートパスが正しくレンダリングされない

ダニエルダニエレッキ

サーバーサイドレンダリング(SSR)をサポートするAngularUniversalを備えたAngularアプリケーションを使用しています。ルートページに問題があります。他のすべてのルートはSSRで完全に機能しますが、「/」は機能しません。ホームルートを試してみると、「/」が「/ app」に変更され、正常に動作します!! 私が使用NestJSていてFirebaseCloudFunctionsが実行されてレンダリングされます。以下のファイルは私が問題を引き起こすかもしれないと思うものです。

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をオンのみでレンダリングしNestJSFirebaseクラウド機能をオンにするときにテストされましたlocalhost(コメントを参照)。同じ振る舞い。Firebaseにデプロイ-同じ動作をします。これを確認したときに、他のすべてのビュー/パスがビューページソースでSSRコードを正しくレンダリングしました私はいくつかのセキュリティヘッダーの変更を行い、好奇心のためにテストを実行しました。「/」パスでホームページをレンダリングしないと、それらが適用されない原因にもなります。それ以外の場合は正常に機能します。以下の2つのスクリーンショットを見つけてください。同じ(ホームページ)ページ用です。

アプリパスを使用して正しくレンダリングされたホームページ(およびセキュリティヘッダーが機能する)

ホームページが/ pathで正しくレンダリングされない(そしてセキュリティヘッダーが機能する)

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]

編集
0

コメントを追加

0

関連記事

分類Dev

JqueryMobileパネルの動的リストビューが正しくレンダリングされない

分類Dev

RailsAJAXパーシャルが正しくレンダリングされない

分類Dev

React:動的ルートが正しく再レンダリングされない

分類Dev

Djangoテンプレート-リストが正しくレンダリングされない

分類Dev

IEでリストが正しくレンダリングされない

分類Dev

h:パネルグループが正しくレンダリングされない

分類Dev

パネルのプレースホルダーに挿入された画像が正しくレンダリングされない

分類Dev

フレックスdivでパグスパンが正しくレンダリングされない

分類Dev

ネストされたインデックスルートがコンセントに正しくレンダリングされない

分類Dev

HTMLテーブルが正しくレンダリングされない

分類Dev

Googleチャートが正しくレンダリングされない-ReactJS

分類Dev

チャートが正しくレンダリングされない

分類Dev

変数に保存されている画像パスがテンプレートで正しくレンダリングされない

分類Dev

ズームコントロールがマップ上で正しくレンダリングされない

分類Dev

スプライトシートを使用して画像が正しくレンダリングされない

分類Dev

ネストされたスクロールウィンドウ内のスティッキーHTML要素が正しくレンダリングされない

分類Dev

ブートストラップ入力グループがjQueryUIダイアログ内で正しくレンダリングされない

分類Dev

ブートストラップ入力グループがjQueryUIダイアログ内で正しくレンダリングされない

分類Dev

ブートストラップ:同じhtmlが正しくレンダリングされない

分類Dev

YUIダイアログ/パネルがIEiframeで正しくレンダリングされない

分類Dev

kableテーブルがWebサイトで正しくレンダリングされない

分類Dev

MatlabプロファイラーテキストがUbuntuで正しくレンダリングされない

分類Dev

テキスト入力ビューが正しくレンダリングされない

分類Dev

StripeElementクイックスタートの例が正しくレンダリングされない

分類Dev

カスタムコンポーネントが正しくレンダリングされなくなった

分類Dev

ネストされたレイアウトが正しくレンダリングされない

分類Dev

スライドショー/カルーセルコンテナでCanvasJSチャートが正しくレンダリングされない

分類Dev

Vaadin +ポリマーコンポーネントが正しくレンダリングされない

分類Dev

Reactのネストされたルートがreact-routerv4で正しくレンダリングされない

Related 関連記事

  1. 1

    JqueryMobileパネルの動的リストビューが正しくレンダリングされない

  2. 2

    RailsAJAXパーシャルが正しくレンダリングされない

  3. 3

    React:動的ルートが正しく再レンダリングされない

  4. 4

    Djangoテンプレート-リストが正しくレンダリングされない

  5. 5

    IEでリストが正しくレンダリングされない

  6. 6

    h:パネルグループが正しくレンダリングされない

  7. 7

    パネルのプレースホルダーに挿入された画像が正しくレンダリングされない

  8. 8

    フレックスdivでパグスパンが正しくレンダリングされない

  9. 9

    ネストされたインデックスルートがコンセントに正しくレンダリングされない

  10. 10

    HTMLテーブルが正しくレンダリングされない

  11. 11

    Googleチャートが正しくレンダリングされない-ReactJS

  12. 12

    チャートが正しくレンダリングされない

  13. 13

    変数に保存されている画像パスがテンプレートで正しくレンダリングされない

  14. 14

    ズームコントロールがマップ上で正しくレンダリングされない

  15. 15

    スプライトシートを使用して画像が正しくレンダリングされない

  16. 16

    ネストされたスクロールウィンドウ内のスティッキーHTML要素が正しくレンダリングされない

  17. 17

    ブートストラップ入力グループがjQueryUIダイアログ内で正しくレンダリングされない

  18. 18

    ブートストラップ入力グループがjQueryUIダイアログ内で正しくレンダリングされない

  19. 19

    ブートストラップ:同じhtmlが正しくレンダリングされない

  20. 20

    YUIダイアログ/パネルがIEiframeで正しくレンダリングされない

  21. 21

    kableテーブルがWebサイトで正しくレンダリングされない

  22. 22

    MatlabプロファイラーテキストがUbuntuで正しくレンダリングされない

  23. 23

    テキスト入力ビューが正しくレンダリングされない

  24. 24

    StripeElementクイックスタートの例が正しくレンダリングされない

  25. 25

    カスタムコンポーネントが正しくレンダリングされなくなった

  26. 26

    ネストされたレイアウトが正しくレンダリングされない

  27. 27

    スライドショー/カルーセルコンテナでCanvasJSチャートが正しくレンダリングされない

  28. 28

    Vaadin +ポリマーコンポーネントが正しくレンダリングされない

  29. 29

    Reactのネストされたルートがreact-routerv4で正しくレンダリングされない

ホットタグ

アーカイブ