运行应用程序时显示错误消息。我该如何解决答案

【问题标题】：an error message is displays while running the app.how can i fix运行应用程序时显示错误消息。我该如何解决
【发布时间】：2019-12-10 04:59:40
【问题描述】：

错误：路由“”的配置无效。必须提供以下之一：component、redirectTo、children 或 loadChildren

在 app.module.ts 中，

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

在mainhome.module.ts中，

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

【问题讨论】：

标签： angular routing routes angular6 angular-load-children

【解决方案1】：

添加 app-routing.module.ts 文件，可以直接访问子组件

app-routing.module.ts 文件

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 {
}

或者你可以试试这个代码 -> 两者都在工作

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 文件

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 {
}

【讨论】：