Christianity tips

Angular comes packed with an exception handling service that can be used to manage errors application-wide. When the service detects errors, it catches the error and logs it to the console. This service can be extended to add additional features unique to our application like logging the error using an error monitoring platform or sending the errors to your server for analytics. The Error Handler is pretty easy to extend: We need to create a class that extends the properties of the ErrorHandler and overrides the built in handleError method used for displaying errors. Create a file called error-handler.class.ts:

    import {ErrorHandler} from '@angular/core';
    // A fake error monitoring library
    import ErrorClient from '@error-reporters/core';
    
    // Initialize the report library
    const reporter = new ErrorClient();
    
    export class AppErrorHandler extends ErrorHandler {
        constructor(private errorService: ErrorService){
            super(false);
        }
    
        public handleError(error: any): void {
            reporter.sendReport(error)
            super.handleError(error);
        }
    }

In the snippet above, we made use of a fictional error reporting and monitoring library called @error-reporters. After extending the ErrorHandler service, we will report errors emanating from the application in the handleError method before handling the error with the ErrorHandler’s handleError method. After that, we should register our custom AppErrorHandler in app.module.ts:

    @NgModule({
        declarations: [ AppComponent ],
        imports: [ BrowserModule ],
        bootstrap: [ AppComponent ],
        providers: [
            {provide: ErrorHandler, useClass: AppErrorHandler}
        ]
    })

You can read more on the default error handler by Angular here.

When working on fairly large applications or starting up one, it will be helpful to ensure that components not needed for the initial render of your application are lazy loaded. Lazy loaded in the sense that they’re loaded on demand. For example, when a user navigates away from the initial view of the application, a network request is made to load the destination route. Lazy loading can effectively reduce the bundle size of your application, thus reducing the load time of the application on the browser. Lazy loading components starts with creating a feature module in your application, the feature module will house the components, services, providers, etc. attached it. The feature module is then loaded in the root routing module of the application. Look at the example below:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FeatureRoutingModule } from './feature-routing.module';
    import { FeatureComponent } from './feature/feature.component';
    
    @NgModule({
      imports: [
        CommonModule,
        FeatureRoutingModule
      ],
      declarations: [FeatureComponent]
    })
    export class FeatureModule { }

This feature module FeatureModule contains a single component FeatureComponent and a routing module FeatureRoutingModule attached to it. To lazy load this component, we’ll register the feature module’s routing module in the application’s root module:

    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { BrowserModule } from '@angular/platform-browser';
    import { RouterModule } from '@angular/router';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot([
          {
            path: 'feature',
            loadChildren: './feature/feature.module#FeatureModule'
          }
        ])
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

With this simple step, a separate bundle will be built apart from the main app bundle. This bundle will be loaded when the user navigates to the /feature route. The experience might be a bit unpleasant because the user will need to wait for the route’s bundle to be loaded, and this might take a while depending on the size of the bundle. To fix this issue, we’ll prefetch the other bundles in the background once the initial page has been loaded fully. We can do this using a built-in flag provided by Angular called the preloadStrategy. This tells Angular which strategy to use when loading lazied bundles. Let’s update the current implementation to use the PreloadAllModules strategy:

    import { NgModule } from '@angular/core';
    ...
    import { RouterModule, PreloadAllModules } from '@angular/router';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
       ...
      ],
      imports: [
        ...
        RouterModule.forRoot([
          {
            path: 'feature',
            loadChildren: './feature/feature.module#FeatureModule'
          }
        ], {preloadStrategy: PreloadAllModules})
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

With this update, Angular will handle prefetching of feature bundles in the background for easy navigation.