Angular Universal—TransferState注入的脚本的多个实例（<；脚本id="；myapp state"；…<；/script>；）

我有一个Angular 7应用程序，实现了Angular Universal。这是一个相当大的应用程序，有几个延迟加载的模块。我使用了

TransferState

模块，一切都很顺利，除了在某些页面中，

TransferState

模块注入的脚本是“double”。至少有两个实例，如：

<script id="myapp-state">{ objectA }</script>
<script id="myapp-state">{ objectB }</script>

下面是

main.server.ts

文件：

if (environment.production) {
    enableProdMode();
}

document.addEventListener('DOMContentLoaded', () => {
    platformBrowserDynamic()
        .bootstrapModule(BrowserAppModule)
        .catch(err => console.error(err));
});

if (environment.production) {
    enableProdMode();
}

export { ServerAppModule } from './app/server.app.module';

我的

服务器.app.module.ts

：

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        AppModule,
        ServerModule,
        BrowserModule.withServerTransition({
            appId: APPLICATION_NAME
        }),
        NoopAnimationsModule,
        ModuleMapLoaderModule,
        ServerTransferStateModule
    ]
})
export class ServerAppModule {
}

和我的

浏览器.app.module

：

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        BrowserModule.withServerTransition({
            appId: APPLICATION_NAME
        }),
        BrowserAnimationsModule,
        BrowserTransferStateModule,
        AppModule
    ]
})
export class BrowserAppModule {
}

以及my

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

您可以显示您的
server.ts
和
main.ts
文件吗？当然可以。我已经加了一些。server.ts有点太长了，但是如果您对某些特定内容感兴趣，我可以添加更多内容。您可以显示您的
server.ts
和
main.ts
文件吗？当然可以。我已经加了一些。server.ts有点太长了，但是如果您对某些特定内容感兴趣，我可以添加更多内容。