unable to load common module in lazy loaded component in angular, please see for description

Question

I have the following sutructure in my angular app:

App:  
     'auth' => lazyload AuthModule  
          (some auth routes which is working fine and not required for this question)

  '' => lazyload MainSiteModule:
          'home' => HomeComponent  
          'photos' => PhotosComponet
          'managment' => lazyload ManagmentModule
              '' => DashBoard Area
              'edit-profile' => 'EditProfileComponent'

Now In ManagmentModule or any module that I load lazily inside MainSiteModule(which itself is a lazy loaded module), I am unable to use angular pipes, ngIf and common Module stuff even tough I imported Shared Module in every lazy loaded module e.g. managment module...

SharedModule is as follow:

import { NgModule } from '@angular/core';
import { CommentComponent } from './comment-form/comment-form.component';
import { PostCommentsComponent } from './post-comments/post-comments.component';
import { PostComponent } from './post/post.component';
import { PeopleItemRemoveComponent } from './people-item-remove/people-item-remove.component';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [
        CommentComponent,
        PostCommentsComponent,
        PostComponent,
        PeopleItemRemoveComponent
    ],
    imports: [CommonModule, RouterModule],
    exports: [PostComponent, PeopleItemRemoveComponent, CommentComponent, PostCommentsComponent]
})
export class SharedModule { }

I am 101% sure nothing is wrong in imports, But if you need whats inside modules, here it is for you

App Module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './interceptors/auth.intercepter';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, multi: true, useClass: AuthInterceptor }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

App Routing Module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { MainSiteGuard } from './guards/mainsite-guard.service';
import { AuthGuard } from './guards/auth-guard.service';


const routes: Routes = [
  { 
    path: 'auth', 
    canLoad: [AuthGuard],
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule) 
  },
  { 
    path: '', 
    canLoad: [MainSiteGuard],
    loadChildren: () => import('./main-site/main-site.module').then(m => m.MainSiteModule) 
  }
];

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

MainSite Module:

import { NgModule } from '@angular/core';
import { ToggleActiveClassDirective } from './shared-directives/toggle-active-class.directive';
import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component';
import { SharedModule } from './shared-components/shared.module';
import { NewTextPostComponent } from './home/new-text-post/new-text-post.component';
import { MainSiteComponent } from './main-site.component';
import { MainSiteRoutingModule } from './main-site-routing.module';
import { PhotosComponent } from './photos/photos.component';
import { NewPhotoPostComponent } from './photos/new-photo-post/new-photo-post.component';
import { PeopleComponent } from './people/people.component';
import { SearchUserComponent } from './people/search-user/search-user.component';
import { FollowedUsersComponent } from './people/followed-users/followed-users.component';
import { FollowersComponent } from './people/followers/followers.component';
import { BlockedUsersComponent } from './people/blocked-users/blocked-users.component';
import { ChatComponent } from './chat/chat.component';

@NgModule({
    declarations: [
        ToggleActiveClassDirective,
        HeaderComponent,
        MainSiteComponent,
        HomeComponent,
        NewTextPostComponent,
        PhotosComponent,
        NewPhotoPostComponent,
        PeopleComponent,
        SearchUserComponent,
        FollowedUsersComponent,
        FollowersComponent,
        BlockedUsersComponent,
        ChatComponent
    ],
    imports: [
        SharedModule,
        MainSiteRoutingModule
    ]
})
export class MainSiteModule { }

Main site routing module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainSiteComponent } from './main-site.component';
import { HomeComponent } from './home/home.component';
import { PhotosComponent } from './photos/photos.component';
import { PeopleComponent } from './people/people.component';
import { SearchUserComponent } from './people/search-user/search-user.component';
import { FollowedUsersComponent } from './people/followed-users/followed-users.component';
import { FollowersComponent } from './people/followers/followers.component';
import { BlockedUsersComponent } from './people/blocked-users/blocked-users.component';
import { ChatComponent } from './chat/chat.component';
import { PostCommentsComponent } from './shared-components/post-comments/post-comments.component';
import { MainSiteGuard } from '../guards/mainsite-guard.service';

const routes: Routes = [
    {
        path: '', component: MainSiteComponent, canLoad: [MainSiteGuard], canActivate: [MainSiteGuard], canActivateChild: [MainSiteGuard], children: [
            { path: '', pathMatch: 'full', redirectTo: '/home' },
            { path: 'home', component: HomeComponent },
            { path: 'photos', component: PhotosComponent },
            {
                path: 'people', component: PeopleComponent, children: [
                    { path: '', redirectTo: '/people/search', pathMatch: 'full' },
                    { path: 'search', component: SearchUserComponent },
                    { path: 'followed', component: FollowedUsersComponent },
                    { path: 'followers', component: FollowersComponent },
                    { path: 'blocked', component: BlockedUsersComponent }
                ]
            },
            { path: 'chat', component: ChatComponent },
            {
                path: 'post', children: [
                    { path: 'comments', component: PostCommentsComponent }
                ]
            },
            { path: 'managment', loadChildren: () => import('./managment/managment.module').then(m => m.ManagmentModule) }
        ]
    }
];

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

Managment Module:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared-components/shared.module';
import { ManagmentMenuComponent } from './managment-menu/managment-menu.component';
import { ManagmentRoutingModule } from './managment-routing.module';
import { TermsAndConditionsComponent } from './terms-and-conditions/terms-and-conditions.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { AboutComponent } from './about/about.component';
import { FeedbackComponent } from './feedback/feedback.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { EditProfileComponent } from './edit-profile/edit-profile.component';
import { UserAboutComponent } from './user-profile/user-about/user-about.component';
import { UserPostsComponent } from './user-profile/user-posts/user-posts.component';
import { UserPhotosComponent } from './user-profile/user-photos/user-photos.component';

@NgModule({
    declarations: [
        ManagmentMenuComponent,
        UserProfileComponent,
        UserAboutComponent,
        UserPostsComponent,
        UserPhotosComponent,
        EditProfileComponent,
        TermsAndConditionsComponent,
        ContactUsComponent,
        FeedbackComponent,
        AboutComponent
    ],
    imports: [
        SharedModule,
        ManagmentRoutingModule,
        FormsModule,
        ReactiveFormsModule
    ]
})
export class ManagmentModule { }

Managment Routing Module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ManagmentMenuComponent } from './managment-menu/managment-menu.component';
import { TermsAndConditionsComponent } from './terms-and-conditions/terms-and-conditions.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { AboutComponent } from './about/about.component';
import { FeedbackComponent } from './feedback/feedback.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { EditProfileComponent } from './edit-profile/edit-profile.component';
import { UserAboutComponent } from './user-profile/user-about/user-about.component';
import { UserPostsComponent } from './user-profile/user-posts/user-posts.component';
import { UserPhotosComponent } from './user-profile/user-photos/user-photos.component';

const routes: Routes = [
    { path: '', component: ManagmentMenuComponent, pathMatch: 'full' },
    { path: 'profile', component: UserProfileComponent, children: [
        { path: '', pathMatch: 'full', redirectTo: '/managment/profile/about' },
        { path: 'about', component: UserAboutComponent },
        { path: 'posts', component: UserPostsComponent },
        { path: 'photos', component: UserPhotosComponent }
    ]},
    { path: 'profile/edit', component: EditProfileComponent },
    { path: 'terms&conditions', component: TermsAndConditionsComponent },
    { path: 'contact-us', component: ContactUsComponent },
    { path: 'feedback', component: FeedbackComponent },
    { path: 'about', component: AboutComponent }
];



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

And now In route 'profile/edit' which is inside managment module:
Picture of Error *ngIf not found

Please help me how to solve this, Angular Version = 9.

Answer 1

In order to make the CommonModule available to modules which import your SharedModule, you have to add the CommonModule to the exports section of your SharedModule.

@NgModule({
    declarations: [
        CommentComponent,
        PostCommentsComponent,
        PostComponent,
        PeopleItemRemoveComponent
    ],
    imports: [CommonModule, RouterModule],
    exports: [CommonModule, PostComponent, PeopleItemRemoveComponent, CommentComponent, PostCommentsComponent]
})
export class SharedModule { }