Recently, I delved into learning angular with a focus on implementing lazy loading in my project. Here's how the implementation unfolds:
Appmodule -- home
-- login
Homemodule
- features -- main component Featuresmodule
- chilrensmodeul
childrensmodule -- child1 -- child2 -- child3
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, LocationStrategy, PathLocationStrategy } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeModule } from './home/home.module';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
--- app.component.html
<button routerLink="/home">home</button>
<button routerLink="/login">login</button>
<router-outlet></router-outlet>
Getting below error
Error: src/app/shared/main/main.component.html:1:1 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
1 <router-outlet></router-outlet>
~~~~~~~~~~~~~~~
src/app/shared/main/main.component.ts:5:16
5 templateUrl: './main.component.html',
~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MainComponent.
Could someone offer a solution for this issue?
Thank you in advance!