Member-only story
Getting Started with App Shell using Angular 7
A good user experience is one of the essential aspects to consider in web or mobile application design. One of the things that impact user experience is application startup performance. To improve startup experience, we have the App Shell to the rescue.
Angular App Shell can improve performance by loading minimum portion of an application to users while waiting for the entire application to bootstrap. App Shell is built in angular-cli which is a huge benefit. In this article, we will see how to add app shell to an Angular project.
Creating Angular App
In this article, I will be creating two projects to show the difference between regular app and an app built with app shell. Using angular-cli, create a new app
ng new app-without-appshell --routing
Build the app using:
ng build --prod
Navigate to dist/app-wihtout-appshell/index.html, notice that the content is almost empty except the application styles and JavaScript bundles.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AppWithoutAppshell</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link…
