AngularUniversalがルートをレンダリングしない

CapitanFindus

Angular Universalに問題がありますが、すべてのガイドが異なります(公式のガイドも古くなっているようです)。サーバー側のレンダリングでnode.jsサーバーを実行することができました。
実際に何が起こっているのかわからないので、解決できない大きな問題がまだあります

これは app.module.ts

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        HttpClientModule,
        BrowserModule.withServerTransition({
            appId: 'ta-un-certificate'
        }),
        RouterModule.forRoot([{
            path: '', loadChildren: './page/page.module#PageModule'
        }], {
            enableTracing: false,
            useHash: false
        }),
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    providers: [
        SeoService,
        DataService, {
            provide: HTTP_INTERCEPTORS,
            useClass: HttpErrorInterceptor,
            multi: true
        }],
    bootstrap: [
        AppComponent
    ]
})

PageModuleコンポーネントなどを含む別のモジュールをロードするだけです。

@NgModule({
    imports: [
        CommonModule,
        TranslateModule,
        RouterModule.forChild([{
            path: ':name/:id', component: PageComponent
        }, {
            path: '', pathMatch: 'full', component: RedirectComponent
        }])
    ],
    declarations: [
        RedirectComponent,
        PageComponent,
        BannerComponent,
        BodyComponent,
        FooterComponent
    ]
})
export class PageModule {
}

サーバー部分についてapp.server.module.tsは、node.jsで使用されるモジュールを作成しました。

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

問題は、node.jsサーバーからルートを呼び出そうとした場合です。http://localhost:4000/foo/bar、node.jsサーバーコンソールは、これから始まる大きなエラーを出力します。

Error: Uncaught (in promise): ReferenceError: navigator is not defined
[...]

(それは本当に巨大です、あなたが何かを必要とするならば、尋ねてください)そして、cURLから私が<app-root><router-outlet></router-outlet></app-root>html本体の中にだけ得るので、ページはレンダリングされません

たくさんのガイドをチェックしたので、正しい方法を完全に失ってしまったと思いますが、Angular Universal Starterのクローンを作成すると、Universalに期待していることを実行しているようです。

CapitanFindus

server.jsノードによって実行されたコンパイル済みスクリプトを検索すると、Translator内にエラーがあるように見えました。そのため、htmlレンダリングと翻訳パイプの間の問題の検索に集中しましたnavigator.language.splitが、サービス内を見つけました(アプリは私が作成したものではありません)。そのコントロールをisPlatformServerブロック内に移動すると、問題が解決しました。

これはコードの壊れた部分でした

private _language = navigator.language.split('-')[0];

constructor(private _http: HttpClient) {
}

次のように編集しました

private _language;

constructor(@Inject(PLATFORM_ID) private platformId,
            private _http: HttpClient) {

    if (isPlatformServer(this.platformId)) {
        this._language = 'en';
    } else {
        this._language = navigator.language.split('-')[0];
    }
}

問題を修正しました

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ルーターが子をレンダリングしない

分類Dev

AngularUniversalでのサーバーサイドレンダリングにFavアイコンが表示されない

分類Dev

Vuejsがサブルートをレンダリングしない

分類Dev

ルーターリゾルバーがコンポーネントをレンダリングしない

分類Dev

Reactルーターが正しいコンポーネントをレンダリングしない

分類Dev

Spring + VelocityEメールテンプレートがメール本文にHtmlをレンダリングしない

分類Dev

コンポーネントをレンダリングしないルート

分類Dev

WebSocketをレンダリングするAngularUniversalサーバー

分類Dev

Reactルーターが最初にコンポーネントをレンダリングしない

分類Dev

Reactルーターがコンポーネントをレンダリングしない

分類Dev

反応ルーターを使用してコンポーネントがレンダリングされない

分類Dev

React データ コンポーネント テーブルが HTML をレンダリングしない

分類Dev

GolangテンプレートがHTMLをレンダリングしない

分類Dev

iron:routerがテンプレートをレンダリングしない

分類Dev

Twigがテンプレートをレンダリングしない

分類Dev

AngularUniversalによってレンダリングされたコンポーネントの幅を確認してください

分類Dev

React / Routerがコンポーネントをレンダリングしない

分類Dev

React / Routerがコンポーネントをレンダリングしない

分類Dev

更新時にOmrefカーソルがコンポーネントを再レンダリングしない

分類Dev

FullCalendarプラグインがカレンダーにイベントをレンダリングしない

分類Dev

Gmailがメールでフォントを正しくレンダリングしない

分類Dev

マークダウンテンプレートがHTMLを正しくレンダリングしない

分類Dev

useRefフックが再レンダリングをトリガーしない

分類Dev

ReactsetStateがContextsで再レンダリングをトリガーしない

分類Dev

Reactルーターのレンダリングが小道具を取得しない

分類Dev

動的<テーブル>がデータをレンダリングしない

分類Dev

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

分類Dev

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

分類Dev

PubNubEONチャートがデータをレンダリングしない

Related 関連記事

  1. 1

    ルーターが子をレンダリングしない

  2. 2

    AngularUniversalでのサーバーサイドレンダリングにFavアイコンが表示されない

  3. 3

    Vuejsがサブルートをレンダリングしない

  4. 4

    ルーターリゾルバーがコンポーネントをレンダリングしない

  5. 5

    Reactルーターが正しいコンポーネントをレンダリングしない

  6. 6

    Spring + VelocityEメールテンプレートがメール本文にHtmlをレンダリングしない

  7. 7

    コンポーネントをレンダリングしないルート

  8. 8

    WebSocketをレンダリングするAngularUniversalサーバー

  9. 9

    Reactルーターが最初にコンポーネントをレンダリングしない

  10. 10

    Reactルーターがコンポーネントをレンダリングしない

  11. 11

    反応ルーターを使用してコンポーネントがレンダリングされない

  12. 12

    React データ コンポーネント テーブルが HTML をレンダリングしない

  13. 13

    GolangテンプレートがHTMLをレンダリングしない

  14. 14

    iron:routerがテンプレートをレンダリングしない

  15. 15

    Twigがテンプレートをレンダリングしない

  16. 16

    AngularUniversalによってレンダリングされたコンポーネントの幅を確認してください

  17. 17

    React / Routerがコンポーネントをレンダリングしない

  18. 18

    React / Routerがコンポーネントをレンダリングしない

  19. 19

    更新時にOmrefカーソルがコンポーネントを再レンダリングしない

  20. 20

    FullCalendarプラグインがカレンダーにイベントをレンダリングしない

  21. 21

    Gmailがメールでフォントを正しくレンダリングしない

  22. 22

    マークダウンテンプレートがHTMLを正しくレンダリングしない

  23. 23

    useRefフックが再レンダリングをトリガーしない

  24. 24

    ReactsetStateがContextsで再レンダリングをトリガーしない

  25. 25

    Reactルーターのレンダリングが小道具を取得しない

  26. 26

    動的<テーブル>がデータをレンダリングしない

  27. 27

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

  28. 28

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

  29. 29

    PubNubEONチャートがデータをレンダリングしない

ホットタグ

アーカイブ