javascript - 懒模块 Angular 中的共享组件

我有一个问题，我不知道自己没有看到什么。

我有Equis模块

ComponentsHomeModule，一个文件，我有一个要共享的组件

import { NgModule } from '@angular/core';
import { ElementComponent } from './element/element.component';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
  declarations: [ElementComponent],
  exports: [ElementComponent],
})
export class ComponentsHomeModule {}

在这种情况下，组件是ElementComponent，这就是我要共享的组件。

然后我有我要使用ElementComponent的ElementsModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ElementsRoutingModule } from './elements-routing.module';
import { ElementsComponent } from './elements.component';
import { ComponentsHomeModule } from '../../components/components-home.module';

@NgModule({
  imports: [CommonModule, ComponentsHomeModule, ElementsRoutingModule],
  declarations: [ElementsComponent],
})
export class ElementsModule {}

然后在ElementsComponent内部，我尝试渲染ElementComponent，但是当我在HTML中制作时

ElementsComponent html:
<app-element></app-element>

在控制台中，我看到了错误

ERROR in src/app/home/pages/elements/elements.component.html:15:7 - error TS8001: 'app-element' is not a known element:
1. If 'app-element' is an Angular component, then verify that it is part of this module

我不知道错误在哪里，因为如果我将我的组件导入并导出到ComponentsHomeModule中，然后导入该模块，那么所有组件都应该工作。

顺便说一句，我尝试将ComponentsHomeModule导入App.Module，什么也没有，并且我正在使用ComponentsHomeModule的模块在延迟加载中使用：

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { ElementsRoutingModule } from './pages/elements/elements-routing.module';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: '',
        redirectTo: 'elements',
      },
      {
        path: 'elements',
        loadChildren: () => ElementsRoutingModule,
      }
    ],
  },
];

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

解决了：：

问题在于延迟加载的导入。

我正在导入RoutingMoudule而不是仅导入模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { ElementsModule } from './pages/elements/elements.module';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: '',
        redirectTo: 'elements',
      },
      {
        path: 'elements',
        loadChildren: () => ElementsModule,
      }
    ],
  },
];

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

最佳答案

您的ElementsComponent是ElementsModule的一部分，因此，如果要在ElementsComponent中使用ComponentsHomeModule，则需要从ElementsComponent而不是从ElementsModule导出ComponentsHomeModule形式。