angular Transferstate дважды предварительно отрисован - 2 тега сценария состояния приложения в html и 2x предварительно отрисованы с помощью углового комментария

Я использую angular Universal с предварительным рендерингом. При предварительной визуализации я получаю 2 тега сценария предварительной визуализации Angular, но не всегда. В моей среде разработки у меня было предварительно отрисовано 10 маршрутов и в 7 из 10 раз было 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

Вот моя конфигурация prerender из 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" без изменений.

Есть идеи, как этот пререндер мог произойти дважды, учитывая это? Я давно ищу эту ошибку, но не могу ее понять.

Источник

2 ответа

Решение

Я опубликовал это как отчет об ошибке на Angular:https://github.com/angular/universal/issues/2334#event-5393577965

Они уже устранили проблему, когда я ее опубликовал.

Мне пришлось перейти на "@nguniversal/builders": "^12.1.1", который затем решил проблему

Источник

Я не нашел решения через Angular. Но пока я придумал решение, которое мне подходит.

Как npm run prerender генерирует повторяющееся состояние - а пустой вызывает проблемы, я создал сценарий очистки, который просматривает папку dist и ищет и удаляет теги сценария пустого состояния.

Вот суть сценария: https://gist.github.com/mfrancekovic/9a0d8ab4c42c981fb99083b94a3f7d6f

На данный момент это мое решение. Но было бы интересно разобраться, почему это происходит.

Источник
Другие вопросы по тегам