Why *ngFor, routerLink binding error when am i creating another module in angular project?

Question

I have created a module named home in app folder. But I am getting error when i am trying to bind *ngFor, routerLink in a html tag and also showing an error. Here is project structure, app module, app-routing module, home module and home-routing module.

Failed to compile.

src/app/modules/home/inspiration/inspiration.component.html:15:10 - error NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'.

15 read more ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/modules/home/inspiration/inspiration.component.ts:5:16 5 templateUrl: './inspiration.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component InspirationComponent. src/app/modules/home/inspiration/inspiration.component.html:17:5 - error NG8001: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

17 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/modules/home/inspiration/inspiration.component.ts:5:16 5 templateUrl: './inspiration.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component InspirationComponent. `project folder structure

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { InspirationComponent } from './inspiration/inspiration.component';
import { PrabhupadaComponent } from './inspiration/prabhupada/prabhupada.component';
import { BrsmComponent } from './inspiration/brsm/brsm.component';
import { AboutUsComponent } from './about-us/about-us.component';

const routes: Routes = [
  { path: 'inspiration', component: InspirationComponent, pathMatch: 'full' },
  { path: 'prabhupada', component: PrabhupadaComponent, pathMatch: 'full' },
  { path: 'brsm', component: BrsmComponent, pathMatch: 'full' },
  { path: 'aboutUs', component: AboutUsComponent, pathMatch: 'full' },
  { path: '', component: HomeComponent, pathMatch: 'full' },

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

import { HomeModule } from './modules/home/home.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HomeRoutingModule } from './home-routing.module';
import { CommonModule } from '@angular/common';
import { CarouselModule } from 'ngx-bootstrap/carousel';

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


@NgModule({
  declarations: [HomeComponent],
  imports: [
    BrowserModule,
    CommonModule,
    HomeRoutingModule,
    CarouselModule.forRoot()
  ]
})
export class HomeModule { }

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeModule } from './modules/home/home.module';

const routes: Routes = [];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    HomeModule],
  exports: [RouterModule]
})
export class AppRoutingModule { }