2

我有一个实现了 Angular Universal 的 Angular 7 应用程序。这是一个相当大的应用程序，有几个延迟加载的模块。我使用了TransferState模块，一切顺利，eeee除了在某些页面中，模块注入的脚本TransferState是“双重”的。至少有两种情况，例如：

<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) }
                ]
            });
4

0 回答 0