Search code examples
angularweb-worker

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?


Solution

  • 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))
    })