Angular index.html с динамическими значениями | веб-воркер

Вы можете использовать APP_INITIALIZER в своем модуле и использовать фабрику для загрузки службы провайдера, как показано ниже:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [
    ServiceProvider, 
    { provide: APP_INITIALIZER, useFactory: ServiceProviderFactory, deps: [ServiceProvider], multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ваш сервис для получения данных как сервис:

@Injectable()
export class ServiceProvider{
constructor(private http: Http) {

    }

getInitialData(){

 // your fetch logic from API
 }
}

ваша фабрика услуг (добавить в модуль):

export function ServiceProviderFactory(provider: ServiceProvider) {
  return () => provider.getInitialData();
}

Это нормально, что ваш файл показатель будет обновлен после двойного обновления.

Механизм кэширования, реализованный Service Worker, проверит хеш-сумму, чтобы обнаружить любые изменения файла. Если хэши разные, загрузит новую версию и закэширует ее (но не будет отображать с первого раза).

После обновления во второй раз вы увидите обновленную версию.

Если вам вообще не нужен кеш, вы можете отключить сервисного работника из угловой.json:

"configurations": {
     "production": {
          "serviceWorker": false,
          "ngswConfigPath": "src/ngsw-config.json"
     }
}

Кроме того, вы можете прослушивать изменения (SW worker определяет, когда найдена новая версия) и отображать правильное сообщение для пользователей с помощью кнопки для обновления страницы. Посмотрите здесь как поймать и обработать процесс обновления.

Удачи!

Спасибо за ответы, но никто не может точно решить мою проблему. Я не могу использовать APP_INITIALIZER, потому что я не знаю API_URL в данный момент, и это одна из вещей, которые мне нужно передать в приложение. Это динамическое значение, поэтому оно не может быть частью process.env.

Отключение кэширования index.html у меня не работает должным образом.

Но решение довольно простое.

Вместо того, чтобы напрямую изменять файл index.html, я добавил в него <script src = "/envs"> и я выложил этот файл в express.js

app.get('/envs', async (req, res) => {
    const envs = ...
    res.end('window.__envs = ' + JSON.stringify(envs))
})