As a newcomer to Angular, I'm encountering some difficulties in defining child routes in Angular. I'm not sure where I'm going wrong. When I try to create a separate module for the child components, I run into issues when defining the routes.
Template parse errors: 'app-sidebar' is not a known element: 1. If 'app-sidebar' is an Angular component, then verify that it is part of this module. 2. If 'app-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
Error:
<h1>Welcome Admin!!</h1>
<ul>
<li>[ERROR ->]<app-sidebar></app-sidebar></li>
<li><router-outlet></router-outlet></li>
</ul>Here is the format of the project
Here is the primary module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule,Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from "@angular/http";
import { AdminModule } from './admin/admin.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { MainpageComponent } from './mainpage/mainpage.component';
import { AdminComponent } from './admin/admin.component';
const appRoutes: Routes = [
{
path: '',
component: MainpageComponent
},
{
path: 'admin',
component: AdminComponent
}
];
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
MainpageComponent,
AdminComponent,
],
imports: [
BrowserModule,
AdminModule,
RouterModule.forRoot(appRoutes),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Here is the admin module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule,Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from "@angular/http";
import { SidebarComponent } from './sidebar/sidebar.component';
import { BookingComponent } from './booking/booking.component';
const adminRoutes: Routes = [
{
path: 'booking',
component: BookingComponent
}
];
@NgModule({
imports: [
BrowserModule,
CommonModule,
RouterModule.forChild(adminRoutes),
],
declarations: [
SidebarComponent,
BookingComponent,
],
exports: [
RouterModule
]
})
export class AdminModule { }Here is the HTML code in admin.component.html that is causing the issue
<div class="admin-header">
<h1>Welcome Admin!!</h1>
<ul>
<li><app-sidebar></app-sidebar></li>
<li><router-outlet></router-outlet></li>
</ul>
</div>Why is the sidebar component route not functioning as expected?