Learn about modules in Angular

NgModule is the first basic structure we will face when writing projects in Angular. It is also very complex and confusing because scope affects different module declarations in different ways. Although the Angular development team has completed the module FAQ, they are quite confusing for beginners to access, especially when combining the module with routing will make it more difficult. larger towels.

1. What is a module? How to create it and what components it has

As soon as we started creating an Angular project, we saw a default module called AppModule, let’s see what it was.

• declarations: Used to declare the components we will use on the template (usually mostly components, directives and pipes).
• providers: Use to declare the services used throughout the module (whether lazy loading module or not is still available).
• imports: It is an array of modules needed to be used in the application. It can also be used by components in the Declarations array. For example, in NgModule , we see BrowserModule and AppRoutingModule imported
• bootstrap: Defines the original component of the module

NOTE: Since the version of Angular 6, services do not need to be registered in the module, we can use the keyword providedIn: ‘root’ to determine the impact of the service, when using this syntax the default service Can be used anywhere in the app, it corresponds to that service being imported right there in AppModule

How to create the module To create a module we can create it manually, or use Angular CLI with syntax

Feature Module : Group components or services related to each other or in a certain feature into a group

What types of modules are there?

• modules of pages
• modules of global services
• modules of reusable components

The detachment of modules has a great influence on the development of an angular project if it is reasonably and scientifically divided, a project will develop easily, maintain, and approach. When starting out of a project consider carefully, and should create a unified rule in the development process so that each person creating a module or adding components will not break the rules people are doing. The following is a sample design of sample mudule that everyone can refer

{ embed :}

2. Scope of the components in the Module

We will start to get confused when the scope of component / directive / pipe (we call it component) is not the same as service.

The scope of the components (declared in the declarations property) can only be used within the module.

The scope of the services (as declared in the providers property) can be used throughout the project. This means that for the feature module (not lazy loading) the service only needs to be declared in any sub module, when imported into the main module will public single instance on the entire sub module and the main module.

For example, there is 1 accountService, and 2 userModule and orderModule modules are injected into AppModule. You can simply declare providers registration for accountService in any feature module (or you can declare in appModule) to use that service in any module.

So our question is:

When should I import a module? Above, we have clarified the difference in scope of component and service in the module. In Angular we have quite a few modules in one application so how do we import them?

• If that module is imported to use components, we will have to import the modules we want to use because the scope of the component is only local scope.
• If that module is imported to use services, we should only import it once in the main module. If not, we may get the error of not finding the component because we haven’t imported the module yet.

How to import Angular modules

• Modules are imported whenever you want (ie multiple times)CommonModule – Contains all components of Angular (structure directive like * ngIf, * ngFor ..): This module we will import in many sub-modules but not in modules. AppModule because it is part of BrowserModule.

  FormsModule / ReactiveFormsModule

  MatXModule also but UI theme modules.

  Any module provides component, directive, pipe.

  …

• The module can only be imported onceHttpClientModule.

  BrowserAnimationsModule or NoopAnimationsModule

  Which modules only provide services: The reason we will talk about lazyloading.

  …

3.Lazy load the module and divide the module with routing

Normally, with less functional Angular App, few modules and routes, we can import all modules into AppModule and add routes right into AppRoutingModule. However, for large projects, loading all the modules at the same time while loading the page may cause a delay in reducing the user experience, and writing all routes into the AppRoutingModule will also make it difficult to develop. Too long files also inhibit development. So is there any way to split the FeatureModule then we also split the route that accompanies those FeatureModule? The answer is yes. Let’s take a look at our example:

For example, an education app has 3 roles: admin, teacher and student. For each of these routes, I will divide it into each feature module, in each feature module I will have a route file in that module, to define routes related to the screens in that role.

In the AdminRoute section we will do the following:

Please pay attention to: RouterModule.forChild(routes) here

As the above implementation, we can understand that with the admin role when we visit pages in that module, the path always starts with “admin” for example ‘admin / users’, ‘admin / users / 1’, similar Self with student and teacher

With the other 3 FeatureModule they do not need to be added directly to the AppModule, with that implementation we have actually implemented the LazyLoad Module, which means that when the user enters the path of each feature, the module will be loaded, i.e. When In the original path, for example: localhost: 4200, the other Feature Module has not yet been loaded, when entering the path such as localhost: 4200 / admin / users, the new admin module will be loaded.

So with this implementation, how is it different from importing everything into AppModule?

• For components, there will be no changes, we still import the module as above (ie import commonModule and modules that provide components).

For service, there will be a little difference

• We can still see the services provided in AppModule. However, the services we provide in the lazy load module will have the following properties: (1) It is only available in the lazy load module or less, the external modules will not be visible and (2) If the lazy load module provides service is similar to AppModule then It will create new instance.

4. Preload

When the application is loaded, all components of the lazy modules are not yet loaded, but they are actually loaded only when the user is using them.

Thus, we have successfully Load Lazy significantly improve the first load speed of the application. However, one thing is still not very good, that is, the module is only loaded when the user uses it. This can lead to delays when users have to wait for the module to load => making the user experience worse. => Is there a way to load those modules implicitly? => The answer is yes, and that is preload

So how to use it? Here’s how to preload all the modules in the Angular app

However, preloading all lazy load modules is not always the right choice. Especially for mobile devices or low bandwidth connections. We may end up loading modules that users may rarely redirect to. Finding the right balance of performance and user experience is the key to development.

For example, in the email application, we have 2 lazy load modules:

Settings module Email module This is an email client application so the Email module will be used very very often. However, the Setings module will be used by users but with very low productivity. So preload Email module will bring high efficiency, while with Setings module is low.

Angular provides a extend PreloadingStrategy to define a custom Preload strategy that indicates the preloading of lazy load modules. We will create a extend provider from PreloadingStrategy to preload modules that have preload: true defined in the route configuration.

Conclusion

I have just introduced you to the most basic knowledge about the module in Angular app, hope that you will have more good knowledge about the module and will apply it successfully in your project.

The article is referenced on

https://angular.io/guide/ngmodules

https://medium.com/@cyrilletuzi/architecture-in-angular-projects-242606567e40

https://medium.com/@cyrilletuzi/understanding-angular-modules-ngmodule-and-their-scopes-81e4ed6f7407

https://hpphat.wordpress.com/2018/11/07/tim-hieu-ve-angular-module-va-tam-vuc-anh-huong-scope/?fbclid=IwAR12JQmGVxN3lBChWMr0BYhDq8znQRJf0ZwQeJpuazSsZplbwRv8W