angular nested component inside a custom module

Question

so I am trying to build something using angular v11.

And my project structure is like this

page-not-found is a component, and umum is a module.

UmumModule is lazy loaded, declared in app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', redirectTo: '/public', pathMatch: 'full', },
  { path: 'public', loadChildren: () => import('./umum/umum-routing.module').then(m => m.UmumRoutingModule) },
  { path: '**', component: PageNotFoundComponent },
];

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

Inside UmumModule, I create routing that pointed to LandingComponent

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

const routes: Routes = [
  { path: '', component: LandingComponent }
];

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

also, I create 2 other component: SidebarComponent and SidebarContentComponent inside UmumModule

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

import { UmumRoutingModule } from './umum-routing.module';
import { LandingComponent } from './landing/landing.component';
import { SidebarComponent } from './components/sidebar/sidebar.component';
import { SidebarContentComponent } from './components/sidebar-content/sidebar-content.component';


@NgModule({
  declarations: [
    SidebarComponent,
    SidebarContentComponent,
    LandingComponent,
  ],
  imports: [
    CommonModule,
    UmumRoutingModule
  ],
  exports: [
    SidebarComponent, SidebarContentComponent,
  ],
  bootstrap:[
    SidebarComponent,
    SidebarContentComponent,
  ]
})
export class UmumModule { }

Here is sidebar.component.ts

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

@Component({
  selector: 'public-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {

  public st = {
    show_menu: false,
  };

  constructor() { }

  ngOnInit(): void {
  }

  handleClick(){
    /**toggle sidebar */
  }

}

and i want to nested the SidebarComponent inside LandingComponent view

<!-- <p>landing works!</p> -->

<public-sidebar></public-sidebar>


<header class="masthead d-flex"
    style="background-size: 100vw auto; background-position: center 100px; background-color: #ffde59">




    
    <div class="container text-center my-auto">

but it is always give me error

thanks a lot in advance for your help.

I intend to use public-directive only inside umum.module, so I declared it only in umum.module — mozar, Nov 15 '20 at 13:36

score 2 · Answer 1 · answered Nov 15 '20 at 13:18

2

The error message means that inside the module you are trying to use <public-sidebar>, but the component is not registered.

Make sure that:

SidebarComponent is registered in the declarations array of a module. As far as I see it, you probably want to register it in your umum.module file:

@NgModule({
  declarations: [SidebarComponent]
})
export class UmumModule {}

If you have more than one module, you can also use the export array and then import the given module:

@NgModule({
  declarations: [SidebarComponent],
  exports: [SidebarComponent]
})
export class SidebarModule {}

@NgModule({
  imports: [SidebarModule], // Make the <public-sidebar> tag available in your module.
})
export class UmumModule {}

answered Nov 15 '20 at 13:18

code-gorilla

2,231
1
6
21

Hi, thanks for fast response. Yes, I registered it in UmumModule, inside declarations array, still got the same error. I edited the question to include the screenshot of my UmumModule. did I miss something? – mozar Nov 15 '20 at 13:25
Ok, in which module did you register the LandingComponent? If it is not in the same module, you have to use the import/export approach from my answer. cheers – code-gorilla Nov 15 '20 at 13:26
I registered SidebarComponent inside UmumModule. And LandingComponent also inside UmumModule. – mozar Nov 15 '20 at 13:28
Strange - have you tried to restart your ng serve? Maybe it's just a hickup then. – code-gorilla Nov 15 '20 at 13:31
yes, it is very strage. i have restart ng serve multiple times. maybe I need to restart my laptop – mozar Nov 15 '20 at 13:33
still error, i will try using another version of angular – mozar Nov 15 '20 at 13:38

score 0 · Answer 2 · answered Nov 15 '20 at 14:46

0

thanks everyone helping me, it is my mistake, i created lazy loading by importing the routing module instead of importing the module, sorry, my mistake, thanks a lot

answered Nov 15 '20 at 14:46

mozar

19
8

angular nested component inside a custom module

2 Answers2