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に期待していることを実行しているようです。
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]
コメントを追加