I have app module and shared module. In app-routing module I have:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SiteLayoutComponent } from "./shared/layouts/site-layout/site-layout.component";
import { LoginPageComponent } from "./components/login-page/login-page.component";
const routes: Routes = [
{
path: '',
component: SiteLayoutComponent,
children:
[{path: 'login', component: LoginPageComponent}]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
In app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>'
})
export class AppComponent {
title = 'TheEda';
}
In shared module:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './layouts/header/header.component';
import { SiteLayoutComponent } from './layouts/site-layout/site-layout.component';
@NgModule({
declarations: [
HeaderComponent,
SiteLayoutComponent
],
imports: [
CommonModule,
]
})
export class SharedModule { }
And also in shared module in site-layout component in site-layout.component.html:
<router-outlet></router-outlet>
I have an Error: src/app/shared/layouts/site-layout/site-layout.component.html:1:1 - error NG8001: 'router-outlet' is not a known element. How can this be fixed? What is missing in my code?