angular11 - Using Angular Components declared on same module in one another

Question

Say we have a component A declared in module M and another component B declared in same module M. Can we call Component B in component A, through its selector ?

I have done something like this in previous versions of Angular to be precise in Angular 6.

But i get the error

NG8001: 'B' is not a known element

in Angular 11

Following is the folder structure

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>

Error Message

√ 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.

Version Information :

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

question from:https://stackoverflow.com/questions/65895869/using-angular-components-declared-on-same-module-in-one-another

Answer 1

You need to add HomeModule into AppModule if you wanna use its components there. Also keep in mind that module exports array supposed to contain used components, directives, modules.

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

But in this case App module bundle will contain both modules (so its gonna be bigger in side).

The second solution - is use lazy loading. But you already did it.