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似乎正在做我对Universal的期待

Answer 1

搜索已编译的server.js脚本，由节点执行的脚本，似乎在Translator中有一个错误。所以我专注于搜索html渲染和翻译管道之间的问题，但后来我在服务中找到了navigator.language.split（app不是由我构建的）。在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 Universal不渲染路线

1 个答案: