Project Structure - Modules

  • Courses
  • Staticpages
  • Admin
  • Auth


  • banner
  • header
  • footer
  • Page-not-found

Courses module - Components, Service and Routing Module

  • course-featured
  • course-list
  • course-detail
  • course-recent
  • course-categories
  • course-service
  • course-routing-module

Staticpages module - Components, Service and Routing Module

  • page
  • Contact-us
  • course-detail
  • page-service
  • page-routing-module

Admin module - Components, Service and Routing Module

  • Login
  • Dashboard
  • Admin-coourse-list
  • Course-form
  • Admin-routing-module

Create - Modules:

 ng generate module courses  -- routing
 ng generate module staticpages  -- routing
 ng generate module admin  -- routing
 ng generate module auth  -- routing

Create - Common Components :

 ng generate component banner 
 ng generate component header  
 ng generate component footer  
 ng generate component page-not-found  

Components of Courses module:

 ng generate component courses/course-featured 
 ng generate component courses/course-list
 ng generate component courses/course-detail
 ng generate component courses/course-recent
 ng generate component courses/course-categories

Service for Course Module

ng generate service courses/courses

Components of staticpages module:

 ng generate component staticpages/page
 ng generate component staticpages/contact-us

Service for staticpages Module

ng generate service staticpages/staticpages


Import courses and staticpages module in app.module.ts

  import { CoursesModule } from './courses/ courses.module';
  import { StaticpagesModule } from './staticpages/staticpages.module';

  imports: [



Export CousresFeaturedComponent component for showing this component on root component app.component.html

   imports: [
  exports: [



Set design of home page

  <div class="container"/>