Wednesday, 21 November 2018

Important Notes Related To Import , Export, Declarations, Providers, In @NgModule In Angular - 6

Important Notes Related To Import , Export, Declarations, Providers, In @NgModule In Angular - 6

Types Of Module
1). app.module
2). child.module (Under the app folder is known as child module)

Notes :-
1) app.module (Main module of our application)
. - If we want to use any child module throuout the app than we nee to import it in app.module
  - If we want any inbuilt moules (FormsModule,ReactiveFormsModule) or third party module(BS-  Datepicek module) we nee to import it into app.module
  -If we want to use any component of any child.module than we have to export it from that  child.module and import it in app.module
ex:- we are having a child account module with  RegisterComponent and want to render it on app.component.html
================account.module.ts==============================
import { NgModule } from '@angular/core';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
];
const component = [LoginComponent, RegisterComponent];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [UserService],
  declarations: [...component],
  //If you not export components using this  and try to render it in app.component.html than you will get error that
  // app-component is not part of module.
  exports: [...component],
})
export class AccountModule { }
================app.component.html==============================
<app-login></app-login>

<app-layout>
</app-layout>

<router-outlet></router-outlet>
=====================================================================
2).For to use FormsModule Component of app folder we need to import it in app.module.ts

3). Use the CommonModule to get access to the *ngIf, *ngFor...etc directives:

4).Angular compilation : -    More...

5).HttpClient  & HttpClientModule (Used id angular 4.3.x and above)
    Must import in app.module for to make api (service) call More ...

No comments:

Post a Comment

SQL STUFF Function and Get common grid data with pagination, filteration, sorting by sp & functions

========================================================================= STUFF FUNCTION ===================================================...