What is an app-shell in angular?
App-shell or application shell is the minimal HTML, CSS, and JavaScript powering the user interface. The application shell architecture uses intelligent service workers who work for offline caching. One of the benefits of app-shell is that it gives instant loading performance benefits when it comes to repeat visits to the web application.
Service workers
Service workers are chunks of code that run behind web applications. Service workers work pretty well for offline caching or caching of User Interface shell for recurrent visits. It means that users get the first meaningful paint of the web application that pops out promptly. It is because the browser can render the HTML and CSS without needing to boot up JavaScript.
Let’s create an app-shell:
Prepare the application
Here we are building a new web application by the name new_app.
root@educative:/# ng new new_app --routing
Note: You can practice executing commands in the terminal provided below.
After running the above command, the following messages appear.
Message 1:
Would you like to share pseudonymous usage data about this project
with the Angular Team
at Google under Google's Privacy Policy at
https://policies.google.com/privacy. For more
details and how to change this setting, see
https://angular.io/analytics.(y/N)
Select the options (y/N) by typing y for accepting the above message or N for rejecting. After this, you will get another option to select from the following:
Message 2:
Which stylesheet format would you like to use?
You can select CSS from the given options to move forward. A workspace named new_app will be successfully created after this.
Create the application shell
Change the directory to new_app using this command.
root@educative:/# cd new_app
The below command generates an app-shell for our web application.
root@educative:/# ng generate app-shell
After running the above command, Message 1 will appear as shown in the previous section.
By running the below command ls, a file in the list with the name angular.json can be seen.
root@educative:/# ls
To see the content of the file angular.json, use the command below.
root@educative:/# cat angular.json
Verify the application is built with the shell content
To simply verify that our application is built, use the following command:
root@educative:/# ng run new_app:app-shell:development
Terminal
Execute the above commands in the terminal given below:
Free Resources