我在使用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中我仅在HTML正文中获得<app-root><router-outlet></router-outlet></app-root>
。
我认为我查阅了很多指南,完全没有找到正确解决方法,但克隆Angular Universal Starter似乎能够实现我的预期目标。