Angular Universal无法渲染路由

Question

我在使用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似乎能够实现我的预期目标。

- CapitanFindus

---

你的代码中使用了navigator吗？或者使用了依赖它的库？这在服务器端不会被定义。 - David

Answer 1

在编译的server.js脚本中搜索，即由node执行的脚本，似乎在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];
    }
}

已解决问题。

- CapitanFindus