'Error: Invalid configuration of route ''. One of the following must be provided: component, redirectTo, children or loadChildren at validateNode

I am trying to setup a project using angular routing. However, the project is displaying only the contents of index.html. Even the app.component.html is not being displayed. On inspecting, it just shows <app-root></app-root> in the body tag instead of the content of app.component.html. The compilation is error free. There is an error in the console:

error: Invalid configuration of route ''. One of the following must be provided: component, redirectTo, children or loadChildren

index.html

<body >
      <app-root></app-root>
    
</body>

app.component.html

<nav class="navbar navbar-expand-md">
  <a class="navbar-brand logo" href="#">WeCare</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item myitem">
        <a class="nav-link mylink disable" [routerLink]="['user/profile']" *ngIf="uProfile"><i class="fa fa-user"></i>&nbsp;View Profile</a>
      </li>
      <li class="nav-item myitem">
        <a class="nav-link mylink disable" [routerLink]="['user/appointments']" *ngIf="uProfile"><i class="fa fa-list"></i>&nbsp;My Appointments</a>
      </li>
      <li class="nav-item myitem">
        <a class="nav-link mylink disable" [routerLink]="['coach/profile']" *ngIf="cProfile"><i class="fa fa-user"></i>&nbsp;View Profile</a>
      </li>
      <li class="nav-item myitem">
        <a class="nav-link mylink disable" [routerLink]="['/coach/home']" *ngIf="cProfile"><i class="fa fa-list"></i>&nbsp;My Schedules</a>
      </li>
      <li class="nav-item myitem">
        <a class="nav-link mylink disable" [routerLink]="['/home']"><i class="fa fa-phone"></i>&nbsp;Call Us : 080 2233447</a>
      </li>
      <li class="nav-item myitem" *ngIf="logout">
        <a class="nav-link mylink" (click)="logoutFn()" [routerLink]=""><i class="fa fa-sign-out" ></i>&nbsp;Logout</a>
      </li>
    </ul>
  </div>  
</nav>
<h1>welcome</h1>
<div class="container-fluid content">
  <router-outlet></router-outlet>
</div>

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { LoginService } from './login/login.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'App';
  logout = false;
  uProfile = false;
  cProfile = false;
  constructor(private router: Router, private loginservice: LoginService) {
    router.events.subscribe((val) => {
      this.logout = false;
      this.uProfile = false;
      this.cProfile = false;
      if (router.url === '/user/home' || router.url === '/user/profile' || router.url === '/user/appointments') {
        this.logout = true;
        this.uProfile = true;
        this.cProfile = false;
      } else if (router.url === '/coach/home' || router.url === '/coach/profile') {
        this.logout = true;
        this.uProfile = false;
        this.cProfile = true;
      } else {
        this.uProfile = false;
        this.logout = false;
        this.cProfile = false;
      }
    });
  }

  logoutFn() {
    this.router.navigate(['/home'])
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { LoginService } from './login/login.service';
import { SignupService } from './signup/signup.service';
import { UserModule } from './user/user.module';
import { CoachModule } from './coach/coach.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    SignupComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule,
    UserModule,
    CoachModule
  ],
  providers: [
    LoginService,
    SignupService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

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

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'login/:role', component: LoginComponent },
  { path: 'signup/:role', component: SignupComponent },
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) },
  { path: 'coach', loadChildren:()=> import('./coach/coach.module').then(m=>m.CoachModule) },
  { path: '**', redirectTo: 'home', pathMatch: 'full' },
];

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

coach-routing.module.ts

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


const coachRoutes: Routes = [

];
@NgModule({
    imports: [RouterModule.forChild(coachRoutes)],
    exports: [RouterModule]
})
export class CoachRoutingModule { }

Where am I going wrong which is causing this issue ?

Solution 1:^[1]

You must add a route in the child module's route array, usually that route points to some component using the the component property of Route

Someting like below,

const routes: Routes = [{ 
 path: '', 
 component: SomeComponent
}];

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	navdbaloch

'Error: Invalid configuration of route ''. One of the following must be provided: component, redirectTo, children or loadChildren at validateNode

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]