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: