Code Architecture In Angular

Hello Friends, In this article, we will learn how to set new Angular application architecture and maintainable. we should implement the most common things like reusable services, feature-specific components, and etc.

First of all, we need to generate a new Angular application using the below command.

ng new angular-architecture

The angular application will have 2 main parts:

1. The eager loading: which will be loaded core modules and feature modules that are required to start the application. It will contain the AppModule with top-level routes and CoreModule with a basic layout and all the core singleton services which will be used throughout the whole application.

2. The lazy loading: which will be loaded all other modules on-demand after the application started. The lazy modules will also import SharedModule.

Core Modules:
We’re going to create an Angular basic structure with a couple of commands, the first of them being ng g m core which will generate a new CoreModule in the core/ folder.

Now, add BrowserModule and BrowserAnimationsModule to the imports: [] array of the CoreModule while removing them from the AppModule and replacing them with the CoreModule and also add “main-layout” component using ng g c core/layout/main-layout. we need to add it to the exports: [] and then use it in the app.component.html by using its HTML tag <app-main-layout></app-main-layout>.you can design the style of the main layout according to your requirement.

core.module.ts

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
  ],
  exports: []
})
export class CoreModule { }

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CoreModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Lazy Loading :
Now, we generate lazy-loaded modules.
First, we will create a module for the home page using ng g m home –route home. it creates a module, routing module, and component files in the app/home.
Now, add the first “empty” route which will redirect to the home page, it is a default landing page of our application.

Now we add the same for our admin route using ng g m admin –route.

const routes: Routes = [
  {
    path: '',
    pathMatch:'full',
    redirectTo:'home'
  },
  {
    path:'home',
    loadChildren:()=> import('home/home.module').then(m => m.HomeModule)
  },
  {
    path:'admin',
    loadChildren:()=> import('admin/admin.module').then(m => m.AdminModule)
  },
  {
    pathMatch:'**',
    redirectTo:'home'
  }
];

Global Services :
Global services are we need in the whole app. services have generally a global scope, these modules are loaded only once in the AppModule, and then services are accessible everywhere (including in lazy-loaded modules).

Shared Module :
In our application has core and two lazy loaded modules (home and admin). we start adding functionality to our application we may realize that some of them need to use the same component, directive, or pipe. this is the perfect use case for the SharedModule.
Let’s now create it using ng g m shared. Now, what should we add to it?
– Declarations (components, directives, and pipes) which we want to use in multiple lazy modules
– Reusable Components(the same feature used in multiple modules)

I hope this article helps you and you will like it.