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

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]
})

博客.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 {
}

博客路由.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 {
}