I'm trying to use <router-outlet> but getting an error.
Error: 'router-outlet' is not a known element:
- If 'router-outlet' is an Angular component, verify that it is part of this module.
- If 'router-outlet' is a Web Component then add
'CUSTOM_ELEMENTS_SCHEMA'to the'@NgModule.schemas'component to suppress this message.ng
Angular CLI: 13.3.5 Node: 16.15.0 Package Manager: npm 8.18.0 Visual Studio Code Version: 1.70.2
I checked many other similar questions on StackOverflow but my code seems right.
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';
import { HttpClientModule } from '@angular/common/http'
import { RouterModule } from '@angular/router';
import { SearchBarComponent } from './components/search-bar/search-bar.component';
import { HomeComponent } from './components/home/home.component';
@NgModule({
declarations: [
AppComponent,
SearchBarComponent,
HomeComponent
],
imports: [
AppRoutingModule,
BrowserModule,
RouterModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
const routes: Routes = [
{
path:'',
component: HomeComponent
},
{
path: 'search/:game-search',
component: HomeComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<app-search-bar></app-search-bar>
<router-outlet></router-outlet>