Angular Universal - несколько экземпляров скрипта, введенных TransferState ( - PullRequest
1 голос
/ 01 ноября 2019

У меня есть приложение 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) }
                ]
            });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...