angular Transferstate 预渲染两次 - html 中的 2 个应用程序状态脚本标记和 angular 评论中的 2x 预渲染

Question

我运行 angular 通用预渲染。预渲染时，我得到 2 Angular 预渲染脚本标签，但并非总是如此。在我的开发环境中，我预渲染了 10 条路由，10 次中有 7 次有 2 个应用程序状态脚本标签。在生产环境中，它一直在发生，因此不会出现只有 1 个脚本标签的情况。

<script id="app-state" type="application/json">{}</script>
<script id="app-state" type="application/json">{&q;vacancy-asd6rIXJox&q;:{&q; ... <7script>

和 2 次评论“由 angular:

预渲染

... </script></body>
<!-- This page was prerendered with Angular Universal -->
<!-- This page was prerendered with Angular Universal --></html

这是我在 angular.json

中的预渲染配置

 "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "app:build:ci",
            "serverTarget": "app:server:ci",
            "routes": [
              "/"
            ],
            "routesFile": "routes.txt"
          },
          "configurations": {
            "production": {}
          }
        },

我通过调用 npx ng run app:prerender

开始预渲染

这是我的服务调用 TransferState 的代码：

 async requestVacancy( uuid: string ): Promise<PublicVacancy> {
    const stateKey = this.getVacancyStateKey( uuid );

    const queryString = environment.restApiUrl + '/publicVacancy/' + uuid;
    const vacancy = await this.http.get<any>( queryString ).toPromise();

    this.transferState.set( stateKey, vacancy );
    return vacancy;
  }

  async getVacancy( uuid: string ): Promise<PublicVacancy> {
    const statekey = this.getVacancyStateKey( uuid );
    if ( this.transferState.hasKey( statekey ) ) {
      return this.transferState.get<PublicVacancy>( statekey, {} as PublicVacancy );
    }
    return (await this.requestVacancy( uuid ));
  }

在我的 appModule 中导入“BrowserTransferStateModule”，在我的 appServermodule 中导入“ServerTransferStateModule”不变。

鉴于此，关于此预渲染如何发生两次的任何想法？我一直在寻找这个错误很长一段时间，但我无法弄清楚。

Answer 1

我还没有通过 Angular 找到解决方案。但现在我想出了一个适合我的解决方案。

由于 npm run prerender 生成重复状态 - 而空状态会导致问题，我创建了一个清理脚本，遍历 dist 文件夹并搜索并删除空状态脚本标签。

这是脚本的要点：https://gist.github.com/mfrancekovic/9a0d8ab4c42c981fb99083b94a3f7d6f

目前这是我的首选解决方案。但弄清楚为什么会这样会很有趣。

Answer 2

我已将此作为错误报告发布在 Angular： https://github.com/angular/universal/issues/2334#event-5393577965

我发布的时候他们已经解决了这个问题。

我不得不升级到 "@nguniversal/builders": "^12.1.1", 然后解决了问题

angular Transferstate 预渲染两次 - html 中的 2 个应用程序状态脚本标记和 angular 评论中的 2x 预渲染

angular Transferstate prerendered twice - 2 app-state Script tags in html and 2x prerendered by angular comment

prerender

angular-universal

angular

angular-transfer-state