4. Create event feature module

In this section we will make a feature module and discuss lazy loading feature state. It will also be the beginning of our demo app that we will grow over the course.

1. Create a new EventModule feature module

• Run the following command to create a new feature module for events.

ng g module event

2. Add event container component

We will be following the presentational container component pattern to categorise our components into two groups. The container components are the "smart" components that do all the work to manage state, persisting data and navigating. The presentational components become the "dumb" components mainly focused on displaying data. This makes testing, performance tuning and reusability of components much easier.

• Run the following command to generate a container component for the event feature.

ng g c event/containers/event

3. Add event feature module routes

• Add the router module and a route pointing to the new EventComponent.

src/app/event/event.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { EventComponent } from './containers/event/event.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: '', component: EventComponent }
    ])
  ],
  declarations: [EventComponent]
})
export class EventModule { }

4. Add a lazy route to the AppModule

Lazy loading is done by the router. The "magic string" used in the "loadChildren" field is the magic that allows Angular to compile the JavaScript in this module into a separate bundle. This separate bundle can now be "lazily" sent to the browser when we navigate to the path making our app faster on the initial load.

• Add a new route to the AppModule.

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/containers/home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', pathMatch: 'full', redirectTo: 'home' },
      { path: 'home', component: HomeComponent },
      { path: 'event', loadChildren: './event/event.module#EventModule' }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Add event and home navigation links to the AppComponent

The router links in the HTML are very handy to reduce the logic required inside our app to navigate and the injected dependencies needed to do so.

• Add links to the app component.

src/app/app.component.html

<h1>The App</h1>
<div class="menu">
  <button [routerLink]="['/home']" routerLinkActive="router-link-active">Home</button>
  <button [routerLink]="['/event']" routerLinkActive="router-link-active">Event</button>
</div>
​
<router-outlet></router-outlet>

• Add a ".menu" class with "display: flex" set, this will make the buttons stay inline in our little menu.

• And a ".router-link-active" class which Angular will use to dynamically add this style to the active link in the button we just made.

src/app/app.component.scss

.menu {
  display: flex
}

.router-link-active {
  color: blue;
}

6. Run the app and look at the feature module chunk in the console

This might seems trivial to do but this is a massive improvement to Angular versus AngularJS (the first version) which makes our initial load much smaller and a sub 200kb target in production achievable with some effort.

• Run the app by running the following command and inspect the terminal seeing the extra chunk created for our feature module ("s" is for serve).

ng s

Image: Terminal showing compiled chunks including the EventModule JavaScript.

StackBlitz link

Duncanhunter - Angular And Ngrx Demo App - StackBlitzStackBlitz

Web Link: Link to the demo app running in StackBlitz

Extras and Homework

These extra sections are for doing after the course or if you finish a section early. Please move onto the next section if doing this as a workshop when the instructor advises.

WARNING: Some of these extra sections will make it more difficult to copy and paste the code examples later on in the course.

You might need to apply the code snippet examples a little more carefully amongst any "extras section" code you may add. If you are up for some extra challenges these sections are for you.

Convert the HomeComponent into a feature module

Steps:

1. Add a home module.

2. Remove all references to the HomeComponent from the AppModule.

3. Add the home route to lazy loaded route to the AppModule.

4. Register the HomeComponent on the HomeModule.

5. Add the RouterModule.forChild to the HomeModule.

6. Check that is works.