Angular index.html with dynamic values | web-worker

问题

Until recently we used express.js to serve index.html for Angular, because we need to fill in dynamic variables from the database before the app starts.

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

However, the new Angular 7 caches the source index.html through web-worker.

So when I load the web, it doesn't load properly until I click on the reload.

I tried to disable index.html from the webworker. Nothing happened.

I tried to turn off the web-worker and remove it everywhere. Now I don't have to use a hard reload, but still the first load will show the source file instead of the modified through express.js

1) Why does the source load the source file and how does it get to it?

2) Can I setup it in a webworker?

回答1:

You can use APP_INITIALIZER in your module and use a factory to load provider service like below:

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

your service to fetch data as service:

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

    }

getInitialData(){

 // your fetch logic from API
 }
}

your service factory(add in module):

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

回答2:

Thanks for the answers, but not one can solve my problem exactly. I can't use APP_INITIALIZER because I don't know API_URL at the moment and that's one of the things I need to pass to the application. It is dynamic value so it cannot be part of process.env.

Disabling caching index.html doesn't work properly for me.

But the solution is quite simple.

Instead of changing the index.html file directly, I put <script src="/envs"> into it and I exposed this file in express.js

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

回答3:

It is normal that your index file will be updated after you refresh twice.

The caching mechanism implemented by the Service Worker will check the Hash Sum to detect any changes of the file. If the hashes are different will download the new version and cache it (but will not display it from the first time).

After you refresh the second time you will see the updated version.

If you don't need the cache at all, you can disable your service worker from the angular.json:

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

Also, you can listen for the changes (the SW worker detects when a new version is found) and display a proper message to the users with a button to refresh the page. Have a look here how to catch and handle the update process.

Good luck!

来源：https://stackoverflow.com/questions/55555051/angular-index-html-with-dynamic-values-web-worker

标签

angular

web-worker