how to use another component in a lazy loaded component in angular

Question

I'm trying to use a component within a lazy loaded component and I'm get the error below.

'app-banner' is not a known element: 1. If 'app-banner' is an Angular component, then verify that it is part of this module. 2. If 'app-banner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I'm trying to use <app-banner></app-banner> in the lazy loaded courses.component.html

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HomeComponent } from "./pages/home/home.component";

const routes: Routes = [
 { path: "", pathMatch: "full", redirectTo: "home" },
 { path: "home", component: HomeComponent },
 {
   path: "phone-sign-in",
   loadChildren: () =>
    import("./pages/lazy/lazy.module").then(m => m.LazyModule) // new dynamic import method
 },
 {
   path: "dashboard",
   loadChildren: () =>
    import("./pages/dashboard/dashboard.module").then(q => q.DashboardModule) // new dynamic import method
 },
 {
  path: "google-sign-in",
  loadChildren: () =>
  import("./pages/google-sign-in/google-sign-in.module").then(
    q => q.GoogleSignInModule
  ) // new dynamic import method
  },
  {
   path: "email-sign-in",
   loadChildren: () =>
   import("./pages/sign-in-email/sign-in-email.module").then(
      q => q.SignInEmailModule
    ) // new dynamic import method
  },
  {
    path: "forgot-password",
   loadChildren: () =>
    import("./pages/forgot-password/forgot-password.module").then(
     q => q.ForgotPasswordModule
    ) // new dynamic import method
  },
  {
    path: "email-verification",
    loadChildren: () =>
  import("./pages/verification/verification.module").then(
    q => q.VerificationModule
  ) // new dynamic import method
  },
  {
    path: "courses",
    loadChildren: () =>
    import("./pages/course/course.module").then(q => q.CourseModule) // new dynamic import method
   },

   {
    path: "login",
    loadChildren: () =>
     import("./pages/login/login.module").then(q => q.LoginModule) // new dynamic import method
   }
  ];

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

Answer 1

You can create a Shared Module , and add BannerComponent like this:

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    BannerComponent
  ],
 exports: [
   BannerComponent
 ]
})
export class SharedModule { }

and then import SharedModule in the module where you want to use the BannerComponent , like this:

@NgModule({
  imports: [
    SharedModule, 
    ...
  ]

Answer 2

Please find the below tutorial for lazy loading by @Jeff Delaney here . Its all explain really well here.