Angular 子组件中的角度路由器插座未显示任何内容

Angular 子组件中的角度路由器插座未显示任何内容,angular,routes,Angular,Routes,app.component.html: <router-outlet></router-outlet> }, 主布局.component.html <router-outlet></router-outlet> 旅行路线.模块.ts { path: 'app', component: MainLayoutComponent, children: [ { path: 'travels', loadChildren: () =&

app.component.html:

<router-outlet></router-outlet>
},

主布局.component.html

<router-outlet></router-outlet>
旅行路线.模块.ts

{
path: 'app',
component: MainLayoutComponent,
children: [
  {
    path: 'travels',
    loadChildren: () => import('./modules/travels/travels.module').then(m => m.TravelsModule),
  },
],
import { NgModule } from '@angular/core';

import { TravelsRoutingModule } from './travels-routing.module';
import { SharedModule } from 'src/app/shared/shared.module';

import { TravelsListComponent } from './travels-list/travels-list.component';

const SHARED_COMPONENTS = [TravelsListComponent];

@NgModule({
  declarations: [...SHARED_COMPONENTS],
  imports: [TravelsRoutingModule, SharedModule],
})
export class TravelsModule {}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TravelsListComponent } from './travels-list/travels-list.component';

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

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TravelsRoutingModule {}
值得检查的事项(如果很明显,请道歉):

  • main-layout.component.html是否在MainLayoutComponent中正确导入
  • 浏览器控制台中是否存在任何可能导致无法正确加载内容的错误
  • 是否正在“浏览器网络”选项卡中下载延迟加载模块
  • 如果您将子路由创建为标准路由&而不是延迟加载的模块,那么它可以工作吗
  • 值得检查的事项(如果很明显,请道歉):

  • main-layout.component.html是否在MainLayoutComponent中正确导入
  • 浏览器控制台中是否存在任何可能导致无法正确加载内容的错误
  • 是否正在“浏览器网络”选项卡中下载延迟加载模块
  • 如果您将子路由创建为标准路由&而不是延迟加载的模块,那么它可以工作吗
  • 我找到了解决办法:

    问题: MainLayoutComponent被声明为SharedModule而不在AppModule中

    但在SharedModule not importedRouterModule中,我找到了解决方案:

    问题: MainLayoutComponent被声明为SharedModule而不在AppModule中


    但是在SharedModule not importedRouterModule

    中,您可以在stackblitz中重新创建吗?什么是演示模块?@KurtHamilton我已经更新了post@AleandroCoppola展示相关的代码是很好的,但是对您的问题进行现场再现将非常有帮助。它还可以帮助您在设置过程中认识到问题所在。你发布的内容根本没有什么问题。@AleandroCopola和愚蠢的问题-我想你是在用url
    /app/travels
    进行测试?你能在stackblitz中重新创建吗?什么是演示模块?@KurtHamilton我已经更新了post@AleandroCoppola显示相关代码很好,但是,对你的问题进行一次现场再现真的很有帮助。它还可以帮助您在设置过程中认识到问题所在。你所发布的内容根本没有什么问题。@AleandroCopola和愚蠢的问题-我想你是在用url
    /app/travels
    进行测试吧?