node.js - 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 我只得到 <app-root><router-outlet></router-outlet></app-root>在 html 正文中。

我想我已经检查了很多指南，以至于我完全失去了正确的方法，但是克隆 Angular Universal Starter似乎在做我对 Universal 的期望

Answer 1

搜索已编译的 server.js 脚本，由 node 执行的脚本，似乎 Translator 内部有错误。所以我专注于搜索 html 呈现和翻译管道之间的问题，但后来我刚刚在服务中发现了一个 navigator.language.split(应用程序不是我构建的)。将该控件移到 isPlatformServer block 中解决了我的问题。

这是代码的中断部分

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];
    }
}

解决了问题