Hack SSR in client - trials in angular

Hi

I am just trying out something, just for the sake of trying - knowing it goes against some of the best practices.

Basically, I’d like to mock SSR by delaying the loading of the three JS bundles included in index.html after the angular build steps.

So, I amend the content of index.html in the www folder (yes, I know, not a sustainable practice) to delay the loading of the scripts using simple code:

 <script>
        setTimeout(function() {
            ['polyfills.8f9ee68adcbe2e22d3dd.js', 'runtime.36330a581a2cc128b0f0.js', 'main.e052ebcf6840f44c4ebf.js'].forEach(script => {
                // Get the head tag
                var head_ID = document.getElementsByTagName("head")[0];
                // Create script element
                var script_element = document.createElement('script');
                // Set the script type to JavaScript
                script_element.type = 'text/javascript';
                // External JS file
                script_element.src = script;;
                head_ID.appendChild(script_element);
            })
        }, 14000);
    </script>

Then I want to test if I can render html in the body tag before the scripts are loaded, but that does not seem to work.

Even removing the style sheets, or forcing a style. From element inspection I can see it is in the DOM (or at least, I assume). So my question would be what it would take to have the element rendered

<h1>Hello there</h1>

Just out of curiosity and to see if it would be a nice server-less way to achieve what SSR brings.

ps. I tried to dynamically add app-root, but that did not work (what I tried)

1 post - 1 participant

Read full topic