Question

我有一个实现了Angular Universal的Angular 7应用程序。这是一个非常大的应用程序，带有几个延迟加载的模块。我使用了TransferState模块，一切正常，除了在 some 页面中，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) }
                ]
            });

Angular Universal-TransferState注入的脚本的几个实例（<script id =“ myapp-state”> ... </script>）

0 个答案: