an error message is displays while running the app.how can i fix

Question

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

In app.module.ts,

RouterModule.forRoot([
  {
    path:'',
    loadChildren:'./mainhomemodule/mainhomemodule.module#MainhomeModule'
  }
])

In mainhome.module.ts,

RouterModule.forChild([
  {
    path:'',
    component:HomeComponentComponent,
    children:[{
      path:'',
      component:HomeComponent
    }]
  }
])
],

Answer 1

add in app-routing.module.ts file and you can direct access children component

app-routing.module.ts file

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {BlogListComponent} from "./blog/blog-list/blog-list.component";
import {BlogDetailComponent} from "./blog/blog-detail/blog-detail.component";

const appRoutes: Routes = [

{ path: 'blog', children: [{path: '',
    component: BlogListComponent,
    data: {
        title: 'Blog',
        urls: [{url: '/blog', title: 'Blog'}, {title: 'Blog'}],
    }}, {
    path: 'detail/:id',
    component: BlogDetailComponent,
    data: {
        title: 'Blog Details',
        urls: [{url: 'blog/detail/:id', title: 'Blog Details'}, {title: 'Blog 
    Details'}],
    }
   }]},

  ];

@NgModule({

  imports: [RouterModule.forRoot(appRoutes, { useHash: true })],
  exports: [RouterModule],
})
export class AppRoutingModule {
}

or you can try this code -> both are working

app.module.ts

//blogModule import in app.module.ts
@NgModule({
imports: [BlogModule]
})

blog.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {BlogListComponent} from './blog-list/blog-list.component';
import {BlogDetailComponent} from './blog-detail/blog-detail.component';
import {BlogRoutingModule} from './blog-routing.module';

@NgModule({
 declarations: [BlogListComponent, BlogDetailComponent],
 imports: [
    CommonModule,
    BlogRoutingModule
 ]
})
export class BlogModule {
}

blog-routing.ts file

import {NgModule} from '@angular/core';
import {Routes} from "@angular/router";
import {BlogListComponent} from "./blog-list/blog-list.component";
import {BlogDetailComponent} from "./blog-detail/blog-detail.component";

 export const BlogRoutes: Routes = [
 {
    path: '',
    component: BlogListComponent,
    data: {
        title: 'Blog',
        urls: [{url: '/blog', title: 'Blog'}, {title: 'Blog'}],
    }
 },
 {
    path: 'detail/:id',
    component: BlogDetailComponent,
    data: {
        title: 'Blog Details',
        urls: [{url: 'blog/detail/:id', title: 'Blog Details'}, {title: 'Blog 
    Details'}],
     }
  }
];

@NgModule()
export class BlogRoutingModule {
}