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

Question

错误：路由“”的配置无效。必须提供以下之一：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
    }]
  }
])
],

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