У меня есть приложение Angular 7 с внедренным Angular Universal. Это довольно большое приложение с несколькими загруженными модулями. Я использую модуль TransferState
, и все идет хорошо, даже если на некоторых страницах скрипт, введенный модулем TransferState
, имеет значение "double". Есть как минимум два экземпляра, например:
<script id="myapp-state">{ objectA }</script>
<script id="myapp-state">{ objectB }</script>
И что еще хуже, содержимое внутри обоих отличается . Поэтому, когда клиентское приложение загружается, иногда оно пытается извлечь данные, которые хранятся в objectB , но не могут найти их в objectA , который проверен, потому что ... он первыйодин? (Полагаю, это внутренняя логика модуля TransferState
.
У меня не так много надежд на ответ, поскольку я не могу предоставить слишком много документации, но, возможно, кто-то испыталаналогичная проблема.
В чем может быть причина? Какая часть модуля TransferState
отвечает за внедрение этого скрипта и почему он не выдает ошибку, если она уже есть?
Обновление:
Вот файл main.browser.ts
:
if (environment.production) {
enableProdMode();
}
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic()
.bootstrapModule(BrowserAppModule)
.catch(err => console.error(err));
});
и вот файл main.server.ts
:
if (environment.production) {
enableProdMode();
}
export { ServerAppModule } from './app/server.app.module';
Мой server.app.module.ts
:
@NgModule({
bootstrap: [
AppComponent
],
imports: [
AppModule,
ServerModule,
BrowserModule.withServerTransition({
appId: APPLICATION_NAME
}),
NoopAnimationsModule,
ModuleMapLoaderModule,
ServerTransferStateModule
]
})
export class ServerAppModule {
}
и мой browser.app.module
:
@NgModule({
bootstrap: [
AppComponent
],
imports: [
BrowserModule.withServerTransition({
appId: APPLICATION_NAME
}),
BrowserAnimationsModule,
BrowserTransferStateModule,
AppModule
]
})
export class BrowserAppModule {
}
И часть двигателя моего server.ts
:
app.engine('html', (filePath, options, callback) => {
const engine = ngExpressEngine({
bootstrap: ServerAppModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP),
{ provide: REQUEST, useFactory: () => (options as any).req, deps: [] },
{ provide: RESPONSE, useFactory: () => (options as any).req.res, deps: [] },
{ provide: LOCALES, useFactory: () => allLocalizationStrings, deps: [] },
]
});
engine(filePath, options as any, callback);
});
ОБНОВЛЕНИЕ: Кажется, это связано с моим предварительным рендерингом. Если я деактивирую это, все работает правильно. Если я его активирую, он не будет работать правильно, независимо от маршрута, который я рендую. Вот как я сейчас готовлю рендеринг:
const html = await renderModuleFactory(ServerAppModuleNgFactory, {
document: baseIndex,
url: route,
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP),
{ provide: IS_PRE_RENDER, useFactory: () => true, deps: [] },
{ provide: ERROR_WRAPPER, useValue: (errorWrapper) }
]
});