Angular Universal не отображает маршрут

У меня проблема с 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


node.js angular angular-universal
person CapitanFindus    schedule 22.02.2018    source источник
comment
Используете ли вы навигатор в своем коде? Или библиотека, которая его использует? Это не будет определено на стороне сервера   -  person David    schedule 22.02.2018

Ответы (1)


arrow_upward
3
arrow_downward

Поиск в скомпилированном скрипте server.js, который выполняется узлом, показался, что внутри 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];
    }
}

Исправлена ​​проблема

person CapitanFindus    schedule 22.02.2018