This content originally appeared on DEV Community and was authored by Renan Ferro
Hey guys, how are you?!
It's been a while since I wrote anything but I missed it!
So I wanted to write and share something really cool with you!
Today, I would like to share an interesting way on how we can simplify our module imports, like a one-page Create Account module, and with that, have some advantages!
Let's see what it's like and how we can do it?!
✹ The "Common" Structure 🧩
Think of a Create Account component, when we create it we can notice in the code that the class is not exported by default, because if we look at the export it will be as below:
▶️ The Actual Module Structure:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CreateAccountRoutingModule } from './create-account-routing.module';
import {CreateAccountComponent} from "./create-account.component";
@NgModule({
declarations: [
CreateAccountComponent
],
imports: [
CommonModule,
CreateAccountRoutingModule
]
})
export class CreateAccountModule { }
If you take a look, we don't have the word default after export, so we don't use the standard import of modules.
And when we declare the route in our AppRoutingModule, we need to use the following structure:
▶️ The Actual AppRoutingModule Structure:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'signup',
loadChildren: () => import('./pages/public/account/create-account/create-account.module')
.then(module => module.CreateAccountModule),
title: 'Sign Ups',
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
If you look at the code, you can see that we need to import the module. Now, let's see another and simple way.
✹ Exporting as Default 🥷🏼
Now, let's export the class module as default, and with this we can make some improvements and simplify our code, making it more readable and simple, like bellow:
▶️ The New Module Structure:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CreateAccountRoutingModule } from './create-account-routing.module';
import {CreateAccountComponent} from "./create-account.component";
@NgModule({
declarations: [
CreateAccountComponent
],
imports: [
CommonModule,
CreateAccountRoutingModule
]
})
export default class CreateAccountModule { }
And now in our AppRoutingModule we can simplify the code, like:
▶️ The New AppRoutingModule Structure:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'signup',
loadChildren: () => import('./pages/public/account/create-account/create-account.module'),
title: 'Sign Ups',
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
If you look in the code, now we don't have the .then(module => module) structure.
Because when we declare the module class as default in Angular, we are using the module's default export. This simplifies module import into routes, as the import structure becomes more direct and intuitive.
When using default, the exported module can be imported directly without having to explicitly access the exported module property.
This eliminates the need to use the .then(module => module) structure in routes.
We have many possibilities to make our codes simpler and more elegant, I hope that with this new possibility you have learned something and it helps you!
If you know any other way, have any comments or anything else, leave a comment and let's talk!
See you soon 😁😁🤘🤘🤘
This content originally appeared on DEV Community and was authored by Renan Ferro
Renan Ferro | Sciencx (2024-08-07T23:33:36+00:00) Angular Tip: Let’s Simplify our Module Imports Like a Ninja 🥷🏻. Retrieved from https://www.scien.cx/2024/08/07/angular-tip-lets-simplify-our-module-imports-like-a-ninja-%f0%9f%a5%b7%f0%9f%8f%bb/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.