1

我正在使用预渲染运行 Angular Universal。预渲染时，我得到 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”作为未更改。

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

4

2 回答 2

1

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

当我发布它时，他们已经解决了这个问题。

我必须升级到"@nguniversal/builders": "^12.1.1",然后解决问题

于 2021-10-04T07:36:53.373 回答
0

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

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

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

现在这是我的首选解决方案。但弄清楚为什么会发生这种情况会很有趣。

于 2021-10-01T10:59:53.353 回答