how to eliminate the render block js and css in angular-cli site?

Question

after running ng build --prod I can go into my index.html file in the newly created dist folder and add the async attribute to the bundled script tags to keep them from being blocking. this helps with website speed but sporadically crashes the site. is there an option in the angular-CLI.json that would add this for me during the build in a better way? I ran my site through google's test my website and the only thing I have left to fix is Eliminate render-blocking JavaScript and CSS in above-the-fold content

below is a more specific result I get from https://developers.google.com/speed/pagespeed/insights/

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 4 blocking script resources and 1 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the Html. Remove render-blocking JavaScript: enter image description here

Answer 1

The problem is that you are rendering the "above the fold" page content only after your scripts are loaded. This means that the page can not be rendered without waiting for the resources to load.

To fix this you should render the content of your page on the server-side and inline all css necessary to render the above the fold content in the head section.

You can then mount your angular app on the existing content container and progressively enhance the website.