Angular2 introduces the concept of Modules (NgModule). Every angular2 application need to have at least one module, conventionally named AppModule. As the name suggests, module groups a part (or a whole) of application into a unit, which is easier to maintain. In this post I would like to show you, how modules work, how to split your application into modules and how to add a shared module with common components.
- Adding new page in a separate module
- Navigation component in a shared module
An Angular Module is a class decorated with the
@NgModule. As all other decorators,
@NgModule takes an object telling Angular how to build the module. There are four arrays in the object:
- declarations: list of View classes (components, directives and pipes), which this component is using,
- providers: list of service providers needed by the module
- imports: other modules needed by this module,
- exports: View classes and modules, which may be used by other modules
With this simple theory covered, let’s add a first module.
Few weeks ago, I have posted a tutorial on how to set up Angular2 application with ASP.NET Core. I will be extending the application started there. It’s all available on GitHub
The application I will be working on is very simple and contains one view component
HomeComponent and one service
HelloService, which is used only by this component. I will create a
HomeModule class and import it in
AppModule. This way,
AppModule won’t have to declare provider for
This is our
HomeModule class. As you can see, it declares HomeComponent and a provider for
Now, the only thing we need to do, is to modify
AppModule, so it uses our new module:
AppModule only needs
HomeModule to be able to serve it. It seems useless in such small application, but imagine a bigger one, with 10 pages, each using different components and services. It’s really important to keep your application tidy since the day you start developing it. If you don’t do it right from the beginning, it will catch you at one point with an AppModule class declaring 100 Views and 30 services ;)
Changes for this section on GitHub
Adding new page in a separate module
In the tutorial I have shown how to add a new page - you add a component, route and declare it in the
AppModule. Today, I will show you how to use a separate module to do it.
We will add an About page, which will be shown on URL
/about. First, we add a component:
As you can see, the component is using a
DatePipe - it allows you to customise the format of the date in the template. We will have to declare the use of it in the
DatePipe amongst many others is declared in the
CommonModule. This is why we don’t declare it directly in the
Last thing to do is to add new route in the
With these few steps, we have added new page to our application. Now we need some way of navigating between them. Let’s add a navigation component and let’s use a shared module for it.
Changes for this section on GitHub
Navigation component in a shared module
Most of applications have some common components. One of them may be a navigation bar displayed on top of every page. You need to separate it and then use everywhere. This is where a shared module come in handy.
Again, our first step will be to add a
Next, we need to create a
Because, most of pages will also use stuff hidden in the
CommonModule coming with Angular, I have indluded it here. We also need
routing module to support
routerlink directive in navigation links.
Now, we need to add
<nav></nav> in home and about component templates and import
SharedModule in both modules.
Changes for this section on GitHub.
Angular2 modules are very good way to organize code in your applications. Technically, you can keep everything in the AppModule file, but it will get cluttered very fast and make your app harder to maintain. NgModules seem to be complicated at first, but I hope I have shown you, there really easy to use.