Угловой index.html с динамическими значениями |веб-работник - PullRequest
Новая
       15

Угловой index.html с динамическими значениями |веб-работник

4 голосов
/ 07 апреля 2019

До недавнего времени мы использовали express.js для обслуживания index.html для Angular, потому что нам нужно заполнить динамические переменные из базы данных перед запуском приложения. 

<script> window .__ envs = {{{json envs}}} </script>

Однако новые кэши Angular 7исходный файл index.html через web-worker.

Поэтому, когда я загружаю Интернет, он не загружается должным образом, пока я не нажму на перезагрузку.

Я попытался отключить index.html извеб-работник.Ничего не произошло.

Я пытался отключить веб-работника и удалить его везде.Теперь мне не нужно использовать аппаратную перезагрузку, но все равно при первой загрузке будет показан исходный файл вместо измененного через express.js

1) Почему исходный файл загружает исходный файл и как он это делаетдобраться до него?

2) Можно ли настроить его в веб-приложении?

Ответы [ 3 ]

3 голосов
/ 18 апреля 2019

Вы можете использовать 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();
}
0 голосов
/ 24 апреля 2019

Спасибо за ответы, но никто не может точно решить мою проблему. Я не могу использовать 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))
})
0 голосов
/ 18 апреля 2019

Обычно ваш index файл обновляется после того, как вы дважды обновляете.

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

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

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

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

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

Удачи!

...