'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the...

app.module.ts As you can see that I am lazy loading the MainModule so I have added CUSTOM_ELEMENTS_SCHEMA and imported MainModule also. Added RouterModule.forRoot and exported RouterModule.

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MainModule } from './main/main.module';

export const appRoutes: Routes = [
{
path: '',
loadChildren: () => import('./main/main.module').then(m => m.MainModule),
},
{
path: '**',
redirectTo: '',
pathMatch: 'full',
}
]

@NgModule({
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],
imports: [
BrowserModule,
NgbModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
CommonModule,
HttpClientModule,
RouterModule.forRoot(appRoutes, {
anchorScrolling: 'enabled',
enableTracing: false,
preloadingStrategy: PreloadAllModules,
relativeLinkResolution: 'corrected',
scrollPositionRestoration: 'disabled',
}),
MainModule
],
declarations: [
AppComponent,
],
exports: [
RouterModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


main.module.ts

When I come to MainModule , I did all the Routing and added RouterModule.forChild(mainRoutes)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { MainComponent } from './main.component';
import { VerifyEmailComponent } from './verify-email/verify-email.component';
import { SignupComponent } from './signup/signup.component';
import { EnterEmailComponent } from './enter-email/enter-email.component';

export const mainRoutes: Routes = [
{
path: '',
component: MainComponent,
children: [
{
path: '',
redirectTo: 'enter-email',
pathMatch: 'full'
},
{
path: 'enter-email',
component: EnterEmailComponent
},
{
path: 'sign-up',
component: SignupComponent
},
{
path: 'verify-email',
component: VerifyEmailComponent
}
]
}
]

@NgModule({
declarations: [
VerifyEmailComponent,
SignupComponent,
EnterEmailComponent
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forChild(mainRoutes),
]
})
export class MainModule { }


mai.component.html

But in main.component.html file when I do <router-outlet></router-outlet> . It shows errors:

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.

<div class="vh-100 w-100">
<div class="row no-gutters h-100">
<div class="col-md-3 h-100">
...
</div>
<div class="col-md-9 h-100">
<router-outlet></router-outlet> // errors come here
</div>
</div>
</div>

Continue reading...