Prerendering content during build
The package.json
file of our Angular CLI workspace contains the prerender
npm script that we can use to improve the first loading of our application. The script runs the prerender
command from the architect
section of the angular.json
configuration file and prerenders the content of our application during build time. Let's see the effect that prerendering will have on our GitHub portfolio application:
- Execute the following
npm
command to generate a prerendered version of the application:
npm run prerender
- The preceding command will output a production bundle of the application into the
dist\gh-portfolio\browser
folder. - Navigate to the
dist\gh-portfolio\browser
folder and you should see two HTML files, theindex.html
and theindex.original.html
file. - Open the
index.original.html
file and locate the<app-root>
HTML element. This is the main component of our Angular application, where Angular will render the content of our application in...