If 'router-outlet' is an Angular component, then verify that it is part of this module. angular 12

Question

Recently I started learning angular, and I am trying to implement lazy loading. implementation goes like this.

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>

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { SharedModule } from './shared/shared.module';

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full'},
  { path: 'login', component: LoginComponent},
  { path: 'home', component: HomeComponent},
  { path: '**', component: HomeComponent }
];

@NgModule({
  imports: [SharedModule, RouterModule.forRoot(routes, {useHash: false})],
  exports: [RouterModule],
})
export class AppRoutingModule {}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeRoutingModule } from './home-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { SharedModule } from '../shared/shared.module';
import { HomeComponent } from './home.component';

@NgModule({
  declarations: [HomeComponent],
  imports: [
    BrowserModule,
    CommonModule,
    BrowserAnimationsModule,
    HttpClientModule,
    HomeRoutingModule,
    SharedModule
  ],
  exports: [HomeComponent]
})

export class HomeModule { }


<h1>I am home</h1>
<a routerLink="/cust/features/child1">child1</a>
<a routerLink="/cust/features/child2">child2</a>
<a routerLink="/cust/features/child3">child3</a>

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from '../shared/main/main.component';

const homeRoutes: Routes = [
  {
      path: '', component: MainComponent,
      children: [
          { path: '', redirectTo: 'cust', pathMatch: 'full'},
          { path: 'cust',
          loadChildren: () => import('../features/features.module').then(m => m.FeaturesModule)},
      ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(homeRoutes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

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

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'features' },
  { path: 'features', loadChildren: () =>
    import('./childrens/childrens.module').then((m) => m.ChildrensModule)
  },
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class FeaturesModule { }

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { Child1Component } from './child1/child1.component';
import { Child2Component } from './child2/child2.component';
import { Child3Component } from './child3/child3.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'child1' },
  {path: 'child1', component: Child1Component},
  {path: 'child2', component: Child2Component},
  {path: 'child3', component: Child3Component},
  {path: '**', component: Child1Component},
];

@NgModule({
  declarations: [Child1Component, Child2Component, Child3Component],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class ChildrensModule { }

--child1.html
<h1>i am child 1</h1>

--child2.html
<h1>i am child 2</h1>

--child3.html
<h1>i am child 3</h1>

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.

can anyone provide the solution for this scenario

Thanks in advance

do you import the `RouterModule` inside the `SharedModule` ? — Arash Etemad, Sep 18 '21 at 08:11
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MainComponent } from './main/main.component'; @NgModule({ declarations: [MainComponent], imports: [ CommonModule ], exports: [MainComponent] }) export class SharedModule { } — study clan, Sep 18 '21 at 08:11
Here is stack blitz for this https://stackblitz.com/edit/angular-ivy-5svy7k?file=src/app/app.module.ts — study clan, Sep 18 '21 at 08:28
here is the stack blits.io https://angular-ivy-5svy7k.stackblitz.io — study clan, Sep 18 '21 at 08:30
Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). — Community, Sep 25 '21 at 09:11

Arash Etemad · Answer 1 · 2021-09-18T08:13:23.680

3

You should import RouterModule in your shared.module:
(the error says that can't find the RouterModule where you declare the MainComponent)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainComponent } from './main/main.component'
import { RouterModule } from '@angular/router';


@NgModule({
  declarations: [
     MainComponent,
  ],
  imports: [
     CommonModule,
     RouterModule // <---
  ],
  exports: [
     MainComponent,
  ]
})
export class SharedModule { }

edited Sep 18 '21 at 08:13

answered Sep 18 '21 at 07:21

Arash Etemad

1,827
1
13
29

I am passing that in AppRoutingModule – study clan Sep 18 '21 at 07:31
check the update. – Arash Etemad Sep 18 '21 at 08:15

score 0 · Answer 2 · answered Sep 18 '21 at 08:32

0

Here is the stackblitx for for this problem https://angular-ivy-5svy7k.stackblitz.io for

answered Sep 18 '21 at 08:32

study clan

39
1
3

https://stackblitz.com/edit/angular-ivy-5svy7k?file=src/app/app.module.ts – study clan Sep 18 '21 at 08:32
yes, it solves that error but i still dont see child1,child2 and child3 displayed in main component – study clan Sep 18 '21 at 09:29
Please edit your question instead of add an answer :) – Elikill58 Sep 18 '21 at 09:29
i ceated new question https://stackoverflow.com/questions/69233492/compoment-is-not-displaying – study clan Sep 18 '21 at 09:47

If 'router-outlet' is an Angular component, then verify that it is part of this module. angular 12

2 Answers2