Angular Universal不渲染路线答案

【问题标题】：Angular Universal not rendering routeAngular Universal不渲染路线
【发布时间】：2018-08-02 01:21:06
【问题描述】：

我在使用 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 的期望

【问题讨论】：

您在代码中使用导航器吗？还是使用它的图书馆？这不会在服务器端定义

标签： node.js angular angular-universal

【解决方案1】：

搜索编译的server.js 脚本，由节点执行，翻译器内部似乎有错误。所以我专注于搜索 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];
    }
}

修复了问题

【讨论】：