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 ...
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