Why optimize an Angular app?

Angular gives you a structured way to build user interfaces for the web, mobile, and desktop. But shipping a solid feature set is only half the job. A production-ready Angular site should also load quickly, behave predictably on flaky connections, show up in search results, and feel native when installed on a home screen.

This guide walks through the practical steps you can take to hit those goals. The focus is on five measurable areas:

  • Performance: improving load times and interaction speed to support conversion and engagement.
  • Reliability: using the Angular service worker to precache assets so the app works on poor networks.
  • Discoverability: using prerendering and server-side rendering so search engines and social media bots can read your content.
  • Installability: giving users an app-like experience that integrates with their operating system.

What this guide doesn't cover

The techniques here assume you're already comfortable with Angular and TypeScript. If you're still getting up to speed, review the TypeScript documentation and the official "Getting Started with Angular" guide on angular.io before diving into optimization work.

Setting up a base project

The Angular CLI is the fastest route to a new client-side application. Install it globally first, then confirm you have the latest release:

npm i -g @angular/cli
ng version

You need version 8.0.3 or newer. If you don't want a global install, you can add the CLI as a local dependency and invoke it through npx:

npm i @angular/cli
npx ng version

Creating the app

Generate a new project with the CLI:

ng new my-app

This creates the initial folder structure and installs the required node modules. Once the setup is finished, start the development server:

cd my-app
ng serve

Your app will be live at http://localhost:4200.

Where to go from here

With a working project in place, you can start applying the optimization patterns covered in this guide, which include:

  • Route-level code splitting
  • Performance budgets with the Angular CLI
  • Route prefetching and prefetch strategies
  • Change detection optimization
  • Virtualizing large lists with the Angular CDK
  • Precaching assets with the Angular Service Worker
  • Prerendering routes and server-side rendering with Angular Universal
  • Adding a web app manifest for installability