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 {}

Adrita Sharma · Accepted Answer · 2019-12-09 06:58:09Z

2

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, 
    ...
  ]

answered Dec 9, 2019 at 6:58

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related