Angular Roterの反映がうまくいかない。

前提・実現したいこと

具体的には
Rooterサブモジュールを使えるようになりたいです。
以下の記事を参考にしました。
https://qiita.com/kotar0/items/668229362f51b3780c14
しかし、Childの方の
<router-outlet></router-outlet>
が反映されていないです。

エラーが出るわけでもなくて、ng serveは通ってしまいます。
Angular CLI: 10.2.0
Node: 14.5.0
バージョンで書きたかたが違うとかあるのですか？

どのようにエラーを確認したり、トラブルシュートをすればいいのかわからないので教えてただけると幸いです。

sub.component.html

ここでの<router-outlet></router-outlet>の部分に他のcomponentを差し込みたいです。

<app-header></app-header>

<body class="bg-light">
<div class="container-fluid">
  <div class="row">
    <!-- sideber -->
    <div class="col-sm p-3 min-vh-100">
    <!-- content -->
    <router-outlet></router-outlet>
    </div>
  </div>
</div>
</body>

sub.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from '../home/home.component';
import { ExComponent } from '../home/ex/ex.component';

const routes: Routes = [
  { path: '', component: HomeComponent,
    children: [
      { path: 'ex', component: ExComponent },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TopPageComponent } from './top-page/top-page.component';
import { HomeComponent } from './home/home.component';
import { SignUpComponent } from './account/sign-up/sign-up.component';
import { LoginComponent } from './account/login/login.component';

const routes: Routes = [
  { path: '', redirectTo: '/top', pathMatch: 'full' },
  { path: 'top', component: TopPageComponent },
  { path: 'login', component: LoginComponent },
  { path: 'sign-up', component: SignUpComponent },
  { path: 'home', component: HomeComponent },
  { path: 'home',
  loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SidebarModule } from 'ng-sidebar';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { FooterComponent } from './common/footer/footer.component';
import { LoginComponent } from './account/login/login.component';
import { SignUpComponent } from './account/sign-up/sign-up.component';
import { TopPageComponent } from './top-page/top-page.component';


import { HomeModule } from './home/home.module'

@NgModule({
  declarations: [
    AppComponent,
    FooterComponent,
    LoginComponent,
    SignUpComponent,
    TopPageComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HomeModule,
    SidebarModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent],

})
export class AppModule { }

質問、疑問点

自分では設定はできていると思っているのですが、うまく反映されていない原因がわからないです。
何かここ違うんじゃないとか、
どこどこをみる必要があるとかございましたら、何か教えて欲しいです。

何卒、よろしくお願いします。

行動規範の内容に同意します

回答1件

こちら、
HomeModule内でroutingするということなので、
さらにsubmoduleを定義して、
HomeRoutingModuleで、

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    loadChildren: () => import('../sub-module/sub-module.module').then(m => m.SubModuleModule)
  }
];

のようにしてあげて、

SubModuleで

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

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SubModuleRoutingModule { }

みたいにしてあげればうまくいくのではないでしょうか？

投稿2021/08/27 12:33