Angular 通用不渲染路由

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> inside html body.

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

的期望

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

已解决问题

Angular 通用不渲染路由

Angular Universal not rendering route

node.js

angular-universal

angular