使用在同一模块上声明的 Angular 组件答案

【问题标题】：Using Angular Components declared on same module in one another使用在同一模块上声明的 Angular 组件
【发布时间】：2021-01-26 21:30:10
【问题描述】：

假设我们在模块 M 中声明了一个组件 A，在同一个模块 M 中声明了另一个组件 B。我们可以通过组件 A 中的选择器调用组件 B 吗？

我在以前版本的 Angular 中做过类似的事情，在 Angular 6 中更准确。

但我得到了错误

NG8001：“B”不是已知元素

在 Angular 11 中

以下是文件夹结构

app
-home
-- home-footer.component.html
-- home-footer.component.ts
-- home.component.html
-- home.component.less
-- home.component.spec.ts
-- home.component.ts
-- home.module.ts
app-routing.module.ts
app.component.html
app.component.less
app.component.spec.ts
app.component.ts
app.module.ts

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

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

const routes: Routes = [{
  path: "",
  component: HomeComponent
}];

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

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeFooterComponent } from './home-footer.component';
import { HomeComponent } from './home.component';



@NgModule({
  declarations: [HomeComponent, HomeFooterComponent],
  imports: [
    CommonModule
  ]
})
export class HomeModule { }

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

home-footer.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home-footer',
  templateUrl: './home-footer.component.html'
})
export class HomeFooterComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

home.component.html

<p>home works!</p>
<app-home-footer></app-home-footer>

home-footer.component.html

<span>Home Footer works</span>

错误信息

√ Browser application bundle generation complete.

    Error: home/home.component.html:2:1 - error NG8001: 'app-home-footer' is not a known element:
    1. If 'app-home-footer' is an Angular component, then verify that it is part of this module.
    2. If 'app-home-footer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    
    2 <app-home-footer></app-home-footer>
      ~~~~~~~~~~~~~~~~~
    
      home/home.component.ts:5:16
        5   templateUrl: './home.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component HomeComponent.

版本信息：

ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.1.1
Node: 10.16.3
OS: win32 x64

Angular: 11.1.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.1
@angular-devkit/build-angular   0.1101.1
@angular-devkit/core            11.1.1
@angular-devkit/schematics      11.1.1
@angular/cli                    11.1.1
@schematics/angular             11.1.1
@schematics/update              0.1101.1
rxjs                            6.6.3
typescript                      4.1.3

【问题讨论】：

可以，所以请提供您的代码。
@ArashHatami 添加了完整的详细信息

标签： angular angular11

【解决方案1】：

如果你想在那里使用它的组件，你需要将 HomeModule 添加到 AppModule 中。还要记住，模块导出数组应该包含使用的组件、指令、模块。

@NgModule({
  declarations: [HomeComponent, HomeFooterComponent],
  imports: [
    CommonModule
  ],
  export: [HomeComponent, HomeFooterComponent] // Add here declarations and/or imports which should be used my AppModule
})
export class HomeModule { }

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HomeModule, // Add HomeModule here
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

但在这种情况下，App 模块包将包含两个模块（因此它的侧面会更大）。

第二种解决方案 - 使用延迟加载。但你已经做到了。

【讨论】：

【解决方案2】：

为 Home Component 路由添加延迟加载细节解决了这个问题。如果没有延迟加载，注册到 HomeModule 的组件就不是 webpack 生成的主块的一部分。

在 app-routing.module.ts 中

const routes: Routes = [{
  path: "home",
  component: HomeComponent,
  loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
}];

【讨论】：