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

Question

I am running angular Universal with Prerendering. When prerendering, i get 2 Angular prerender script Tags, but not always. In my developement environment I had 10 routes prerendered and 7 out of 10 times it had 2 app-state script tags. On the production environment it happens all the time, so there are no occurrances of only 1 script tag.

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

and 2 times the comment "prerendered by angular:

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

Here is my prerender configuration from angular.json

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

I start prerender by calling npx ng run app:prerender

And here is the code from my service calling the 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 ));
  }

in my appModule im importing "BrowserTransferStateModule" and in my appServermodule im importing "ServerTransferStateModule" as unchanged.

Any ideas on how this prerender could happen twice given this? I have been looking for this bug for quite a while now, but i cant figure it out.

Answer 1

I have posted this as a bug report at Angular: https://github.com/angular/universal/issues/2334#event-5393577965

They had already fixed the issue when i posted it.

I had to upgrade to "@nguniversal/builders": "^12.1.1", which then resolved the issue

Answer 2

I haven't found the solution via Angular. But for now I've come up with a solution that works for me.

As the npm run prerender generates the duplicate state - and the empty one causes the problems, I've created a cleanup script that goes over the dist folder and searches & deletes the empty state script tags.

Here is a gist with the script: https://gist.github.com/mfrancekovic/9a0d8ab4c42c981fb99083b94a3f7d6f

For now this is my go-to solution. But it would be interesting to figure out why this is happening.