'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message

0
votes

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>
1
angular

1 Answers

0
votes

<router-outlet></router-outlet> tag is declared in the RouterModule. Just import RouterModule in your main.module.ts

  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule, // <--- Add this line
    RouterModule.forChild(mainRoutes),
  ]