Technical requirements – Organizing Your Application
A messed-up project is a bug’s nest waiting to spoil your user experience. In addition to quality, good organization of your project from the beginning will give your team productivity and, in the case of Angular, potential improvement in the performance of your application.
In this chapter, you will learn about the function of Angular modules, the difference between these and JavaScript modules, and how to use them in the best way for your project.
You will learn about the single module app anti-pattern and how and why to avoid it. You will also use Angular modules to optimize the import of common components to your application using the SharedModule pattern. Finally, you will understand how to use lazy loading to optimize your application’s performance.
In this chapter, we’re going to cover the following topics:
- Organizing the application with Angular modules
- The first module: AppModule
- Avoiding anti-pattern: single module app
- Optimizing the usage of common modules: the SharedModule pattern
- Improving the size of your app: lazy loading
By the end of this chapter, you will be able to organize your Angular application into functional and optimized modules.
Technical requirements
To follow the instructions in this chapter, you’ll need the following:
- Visual Studio Code (https://code.visualstudio.com/Download)
- Node.js 18 or higher (https://nodejs.org/en/download/)
The code files for this chapter are available at https://github.com/PacktPublishing/Angular-Design-Patterns-and-Best-Practices/tree/main/ch2.
Organizing the application with Angular modules
The basis for organizing the components of an application using the framework is the Angular modules, more recognized in the documentation and the community by the name NgModules.
An Angular module is a TypeScript class marked with the @NgModule decorator that contains metadata, as in this example:
import { NgModule } from ‘@angular/core’;
@NgModule({
declarations: [SimulationComponent],
providers:[],
imports: [
CommonModule,
SharedModule,
MatCardModule,
MatButtonModule,
MatSelectModule,
MatRadioModule,ReactiveFormsModule,
],
exports: [SimulationComponent],
})
export class SimulationModule
{}
Let’s detail each of these types of metadata in the following subsections.