如何在angular

Question

我正在尝试使用延迟加载的组件中的组件，但出现以下错误。

  

“ app-banner”不是已知元素：   1.如果“ app-banner”是Angular组件，请验证它是否是此模块的一部分。   2.如果“ app-banner”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”   禁止显示此消息。

我正尝试在延迟加载的 courses.component.html

中使用<app-banner></app-banner>

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

您可以创建一个共享模块，并添加BannerComponent，如下所示：

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

，然后将SharedModule导入要使用BannerComponent的模块中，如下所示：

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

Answer 2

  

请通过@Jeff Delaney查找以下教程进行延迟加载   here。这一切都很好地解释了。