module example in angular

Open Command prompt and use below commands to create angular project

E:

cd E:\TestProjects\Angular

ng new module-example-in-angular --style=scss --routing --skip-install

cd module-example-in-angular

npm install

Open project in visual studio code.

Go to App folder then right click on app folder click on Generate Module like below image.

• Then enter module name as below image. in my case "admin" is module name.

• Then click on enter. it will create admin module (admin folder, admin.module.ts file and other files) as below image.
  

• Now create Home, Dashboard and User components in Admin module. Created components we can see like below image in admin folder.
  
• Home, Dashboard and User components are imported into Admin.module.ts file like below code. if we want to use Admin module components (like Home, Dashboard, User) in other modules like App.module.ts we need to export those components from admin module like below code. in below code we are exporting Home and Dashboard components  to outside modules.

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { AdminComponent } from './admin.component';

import {DashboardComponent} from './dashboard/dashboard.component'

import {HomeComponent} from './home/home.component'

import {UserComponent} from './user/user.component'

@NgModule({

  declarations: [

    AdminComponent,

    DashboardComponent,

    HomeComponent,

    UserComponent

 ],

  imports: [

    CommonModule

  ],

  exports:[

    DashboardComponent,

    HomeComponent

  ]

})

export class AdminModule { }

• In below code we can see how to import admin module in app module.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { LoginComponent } from './login/login.component';

import{AdminModule} from './admin/admin.module';

@NgModule({

   declarations: [

      AppComponent,

      LoginComponent

   ],

   imports: [

      BrowserModule,

      AppRoutingModule,

      AdminModule

   ],

   exports: [],

   providers: [],

   bootstrap: [

      AppComponent

   ]

})

export class AppModule { }

• Now we can use Dashboard, Home components in app.components.html like below code, but user component not possible to use. reason we didn't exported user component in admin.module.ts. 

<h1>module example in angular</h1>

<app-dashboard></app-dashboard>

<app-home></app-home>

Output: