Angular Essentials

Agenda:

1. Understanding Angular Modules (NgModule)

2. Using Modules Instead of Standalone Components

3. Declaring and Exporting Components

4. Shared Modules

Prerequisite: Must have basic Angular Knowledge

1. Understanding Angular Modules (NgModule)

Components have evolved a lot to behave and function in standalone way. In modern ways of building an application in Angular we use standalone components. Standalone components mean they are not dependent on other components.

"Modules" exists for historic reasons. Before the standalone concepts we use modules for grouping or combining the interdependent components together. In order to support the existing application built out of Modules concept, Modules were still in existence.

Hence learning about modules will help in better understanding of the old derived application using Module as well as in migration of Module based structure to Standalone based structure.

2. Using Modules Instead of Standalone Components

   1. Modules makes the components and other entities more available to each other.

   

   Consider the above diagram, "AppModule" has component "AppComponent" which has grouping of other three components
   1. 'HeaderComponent',
   2. 'UserCompoent',
   3. 'TasksComponent' .
   In this the 'AppComponent' has the knowledge of its underlying components.

   For better understanding in code level, following is the way to use Standalone Components

   

   We can see, under the 'Component' decorator of root Component we need to import all other individual components if we are going to use them in our root level component.

   In the other hand, we can achieve the same grouping using modules in the following way

   

   Here we have changed the 'standalone' property to false as it disables the standalone ability.
   Then to group them, separate module for 'AppComponent' should be created as follows

   

   Here as we can see,
   I. 'NgModule' decorator is used for Module based implementation.
   II. Under 'declarations' property individual components need to be mentioned.
   III. Under 'bootstrap' property, startup component need to be mentioned.
   IV. Under 'imports' property, need to mention the supporting / dependent modules used by the main components.

3. Declaring and Exporting Components

   Above explanations were for functional understanding lets see them in practical.

   For practice, will create two standalone components and convert them into single module.

   Let's consider an app for managing team tasks - Team Task Manager.

   Step 1: Create a new angular project (I preferred VS code for code editing).

   Step 2: Create components like Task Dashboard and New Task
   (Basically in a task manager app, we can see provision given to view the tasks assigned and provision to create new task).
   Note: As of now multiple components that we create is to understand how we can group them using modules. Hence let's focus on the module creation.

   

   Step 3: Now, Add module by right clicking on the app folder and select 'New File' option and name the file as 'app.module.ts'

   

   Step 4: Create "AppModule" module template as we have seen earlier.

   

   Step 5: Under 'declarations' array property, Mention the main components that we need to group. In our case it is 'AppComponent'.
   Make sure the in 'AppComponent' (i.e., in app.component.ts file to remove the 'standalone' property or set the property to false).

   

   Note: We can see a squiggly line in the 'imports' array property. Because imports property will be applicable only for standalone components.
   we will handle this issue in AppModule. We can remove the 'imports' array property from here. [line no: 13].

   Step 6: Now in 'AppModule' as discussed earlier we will add the dependent and main components as follows.

   

   Note:
   Here we have mentioned 'AppComponent' as the startup component and hence mentioned in both 'declarations' and 'bootstrap' property.

   Also, we have added other dependent components that we use in 'AppComponent' (namely: HeaderComponent, UserComponent and TasksComponent) inside 'imports' array property.

   This is because as the dependent components were 'standalone' components and hence we cannot mark them under 'declarations' array property.

   Thus how we use standalone components in our module.

   Step 7: From now 'AppModule' is the root element for our project. Now we need to set the bootstrap point towards 'AppModule' (i.e., start point of the application. In our case).
   For that, Open 'main.ts' available under assets folder and make the following changes.

   

   To Do:
   1. Import 'platformBrowserDynamic' function, available under '@angular/platform-browser-dynamic' package.
   2. using platformBrowserDynamic() function result call method 'bootstrapModule' by passing created 'AppModule' as parameter.

   3. Import 'BrowserModule' module into the 'AppModule' to tell angular about the dependent components.

   

   Save all the changes and start the application.

   In this demo we have converted the main 'AppComponent' into 'AppModule' root. Where we have joined its dependent component inside the 'AppModule'.

   Note: If we are using Modules, importing of 'BrowserModule' into the 'AppModule' is mandatory. Otherwise the components won't be available.

   3.1 Migrating All Components to use Modules

   In this topic we will see how to convert the supporting standalone components into modules and how to include them in the main module.

   Simple Demo:
   Assume we have 'HeaderComponent' (i.e., app.header.ts file) as follows

   

   Let's try to convert this component to group into 'AppModule'.
   Step 1: Remove 'standalone' property / set to false.

   Step 2: In 'AppModule', we can see Squiggly lines on 'HeaderComponent' as below

   

   Note: Since the component is no more standalone, we can derive directly into the declarations array property as follows

   Step 3: In 'AppModule', Under declarations array property add 'HeaderComponent'.

   

   Now, Save all changes and run the application.

   Remaining components like 'UserComponent' and 'TasksComponent' can be converted in the same way.
   Points to keep in mind is that, what are all the supporting components for a standalone components, need to be converted into non-standalone component and to be included in the main module. (In our case AppModule).

   User Component before conversion:

   

   User Component after conversion:

   

   Based on changes happened in 'UserComponent' its dependent component 'CardComponent' went under same change.

   Changes taken place in 'Card Component':

   

   Overall changes in AppModule:

   

   Similarly, 'TasksComponents' can be converted into components based out of modules.

4. Shared Modules - Creating and Using Shared Modules

Now, Lets see how can we convert a component to shared module and use it as grouping module into module.

In this example let's consider the "card component" to be converted into shared module and then will group the created shared module into "app module"

Step 1: Create a shared module inside the shared folder, which contains the cards component as follows

Step 2: Add the cards component into the 'declarations' array property. As well as into the 'exports' array property.
Note: 'exports' array property should be mentioned with the components that we are going to export along with the shared module.

Step 3: Now remove the 'standalone' property inside the card component typescript file as it violates the module based mechanism.

Step 4: Now in 'app.module.ts', remove the 'CardComponent' from 'declarations' array property and import the shared module into the 'app module'. Then add 'SharedModule' into 'imports' array property.

Note: 'CardComponent' is grouped inside 'SharedModule'.

Now, Save all the changes and build the application and run it.

By this day 19th July 2024, we are moving more towards standalone based component architecture. But this post on modules will help dev community in terms of their organization or project needs 'Module' understanding and conversion

Happy Coding...,!