Angular Performance: Techniques for Optimization

Optimizing Angular Performance with Lifecycle Hooks

In Angular, lifecycle hooks are methods that are executed during various stages of a component or directive’s life cycle. These hooks allow developers to run specific code at different points, helping to control behaviour, handle data, and manage resources throughout the component’s lifecycle.

Overview of Angular Component Lifecycle

When an Angular component is created, updated, and destroyed, several lifecycle events occur. The following sections will describe these lifecycle hooks in the order they occur.

• ngOnChanges
• ngOnInit
• ngDoCheck
• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked
• ngOnDestroy

ngOnChanges

When it's called

ngOnChanges is called whenever one or more of a component’s input properties change. It is called before ngOnInit and whenever any bound input property of the component changes.

Use case

we can use this hook to act upon changes to input properties and adjust your component accordingly. For example, if a component receives data via @Input(), ngOnChanges is the best place to update the internal state or make side effects based on those changes.

ngOnInit

When it's called

ngOnInit is called once when Angular initializes the component, after the first ngOnChanges (if any). This is the best place to perform initialization tasks, like data fetching, setting up state, or any logic that needs to run once after the component is set up.

Use case

This is the ideal place for setting up any initial logic, such as calling a service to fetch data or setting default values for properties.

ngDoCheck

When it's called

ngDoCheck is called during every change detection cycle, which means it runs on every change Angular detects, even if the values haven’t changed.

Use case

This hook can be used for custom change detection. Angular’s default change detection may not catch some edge cases, and if you need more granular control (e.g., detecting a change in a complex object), ngDoCheck can be useful.

ngAfterContentInit

When it's called

ngAfterContentInit is called once after Angular has projected content into the component. This means it’s called after the content inside <ng-content> has been initialized.

Use case

This hook is useful when a component uses content projection (i.e., passing content from the parent to the child component), and you want to perform some action after the content is fully initialized.

ngAfterContentChecked

When it's called

ngAfterContentChecked is called after every check of the component's projected content, which is essentially called after Angular checks the content in <ng-content> for changes during a change detection cycle.

Use case

This hook can be useful if you need to perform any post-processing or check after Angular has checked the projected content, such as updating some internal state or handling UI adjustments based on projected content.

ngAfterViewInit

When it's called

ngAfterViewInit is called once after the component’s view (including child views) has been initialized. This is a good place to interact with child components or access the DOM elements.

Use case

This hook is useful when you need to perform actions after the component's view is fully rendered and its child components are initialized.

ngAfterViewChecked

When it's called

ngAfterViewChecked is called after every check of the component’s view (including child views) during the change detection cycle. It runs whenever Angular checks the component’s view for changes.

Use case

You can use this hook to implement post-processing logic that depends on the component’s view and its child views being fully checked by Angular’s change detection.

ngOnDestroy

When it's called

ngOnDestroy is called just before Angular destroys the component. This is typically the last hook that gets called, and it's the best place to clean up resources, such as cancelling subscriptions, removing event listeners, or invalidating timeouts.

Use case

It’s commonly used for cleanup logic, such as unsubscribing from observables or detaching event listeners to prevent memory leaks.

Optimizing Angular App Performance with Lazy Loading and Route-based Module Loading

Lazy loading is a powerful technique for optimizing the performance of Angular applications. By loading specific parts of the app only when they are needed, rather than all at once, lazy loading helps to reduce initial load time, improve user experience, and manage resources more efficiently.

Now we’ll dive into the concept of lazy loading, how to implement it in Angular, and some best practices for maximizing its benefits.

What is Lazy Loading in Angular?

• Lazy loading is a design pattern used to defer the loading of modules, components, or resources until they are explicitly needed.
• Instead of loading the entire application at startup, Angular only loads the necessary modules when a user navigates to a specific route. This drastically reduces the initial bundle size and can improve application performance, especially in large-scale apps.
• In Angular, lazy loading is primarily implemented through the Angular Router. With lazy loading, Angular loads an entire module only when the user navigates to the route associated with that module.

Why Lazy Loading?

Here are a few reasons why lazy loading is beneficial:

• Reduced Initial Load Time: By deferring the loading of non-critical parts of the app, the browser has less code to parse and execute on the initial page load, improving the time to first meaningful paint.
• Faster Startup: Since only essential code is loaded initially, your application becomes responsive more quickly, providing a better user experience.
• Smaller Bundle Size: Lazy loading helps to split your application into smaller bundles (chunks) which are loaded only when required. This means users don’t have to download unnecessary code upfront.
• Improved Resource Management: Large applications can become resource-intensive. Lazy loading ensures that only the resources that are required for the current user interaction are loaded.

How Lazy Loading Works in Angular?

Lazy loading in Angular is primarily implemented through the routing configuration. By using the Angular Router’s loadChildren property, we can configure routes to load modules asynchronously.

Here’s how lazy loading works in a typical Angular app:

• Create Modules for Feature Areas: Angular modules represent functional units in the app. Each feature or set of related components is often grouped in its own module.
• Configure Routes to Use Lazy Loading: In your routing configuration, use the loadChildren property to specify that a module should be loaded lazily. This property points to the module that should be loaded when the user navigates to the associated route.
• Enable Lazy Loading in the App Routing Module: Angular will automatically load the module when the user navigates to the route associated with that module. The module is loaded only when the router matches the route path.

Step-by-Step Guide to Implement Lazy Loading

Let’s walk through a step-by-step example of how to implement lazy loading in an Angular application.

1. Create a New Angular Application

Create a new one by running the following commands:

2. Generate Feature Modules:

For this example, we will create a FeatureModule that we want to lazy load. Let’s create a FeatureModule and its corresponding routing module.

This command does several things:

• Creates a new FeatureModule inside the feature folder.
• Sets up lazy loading by modifying the app-routing.module.ts to load the FeatureModule lazily when the /feature route is accessed.

3. Modify the App Routing Module:

In your app-routing.module.ts, Angular has automatically added a route for the FeatureModule. You should see something like this:

loadChildren: This tells Angular to load the FeatureModule lazily when the /feature route is activated. The import() statement is a dynamic import, which ensures that the module is only loaded when required.

• then(m => m.FeatureModule): This is a promise-based approach, where the FeatureModule is returned once the module is loaded.

4. Set Up the Feature Module and Routing

Inside the feature folder, you’ll have the feature.module.ts and feature-routing.module.ts. The routing module is responsible for defining routes within the FeatureModule.

feature-routing.module.ts might look like this:

feature.module.ts:

5. Set Up the Feature Component

Now, let’s create a simple component within the feature module, which will be displayed when the /feature route is activated.

Generate the FeatureComponent:

The feature.component.ts looks like this:

6. Test Lazy Loading:

Now, We run the Angular app:

When you visit the homepage (localhost:4200), Angular will load the initial bundles (main app).

• If you navigate to /feature (e.g., localhost:4200/feature), Angular will load the FeatureModule lazily.

FlowChart of Lazy Loading:

Understanding Angular Lifecycle Hooks is crucial for managing component behaviour at different stages. These hooks help in initializing data (ngOnInit), detecting changes (ngOnChanges), optimizing performance (ngAfterViewInit), and cleaning up resources (ngOnDestroy). Proper usage ensures efficient memory management and better application performance.

On the other hand, Lazy Loading is a powerful feature in Angular that improves application performance by loading modules only when needed. This reduces the initial bundle size and speeds up the application load time. Implementing lazy loading effectively helps in creating scalable and efficient applications.