angular - 子モジュールに親モジュールのルート URL がありません

Question

Angular が初めてで、モジュールでコードを構造化しようとしています。に応答する管理モジュールを取得しました

/管理者

要求に応じて、ポートフォリオ モジュールと呼ばれる別の子モジュールを管理モジュールに追加しようとしています。

これはうまくいきますが、ポートフォリオモジュールが応答することを除いて

/管理者/ポートフォリオ

リクエスト。現在、それは

/ポートフォリオ

代わりにリクエストしてください。

ここでは PortfolioModule をインポートしています

admin.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from  './admin-routing.module';
import { IndexComponent } from './shared/index/index.component';
import {PortfolioModule} from './portfolio/portfolio.module';

@NgModule({
  declarations: [IndexComponent],
  imports: [
    CommonModule,
    PortfolioModule,
    AdminRoutingModule
  ]
})
export class AdminModule { }

PortfolioModule を子ルートとして定義する必要があるのではないかと考えています。管理ルート内。

admin-routing.module.ts

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

import { IndexComponent } from './shared/index/index.component';

const routes: Routes = [
  {
    path: 'admin',
    component: IndexComponent,
    children: [
      {
        path: 'portfolio',
        /*Maybe add Portfolio Module here?*/
      }        
    ]
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

これが私のポートフォリオモジュールです。特別なことは何もありません。

ポートフォリオ.モジュール.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PortfolioRoutingModule } from './portfolio-routing.module';
import { IndexComponent } from './index/index.component';
import { CreateComponent } from './create/create.component';
import { ListComponent } from './list/list.component';
import { UpdateComponent } from './update/update.component';
@NgModule({
  declarations: [IndexComponent, CreateComponent, ListComponent, UpdateComponent],
  imports: [
    CommonModule,
    PortfolioRoutingModule
  ]
})
export class PortfolioModule { }

最後に、ポートフォリオ ルーティングを示します。親ルートを含めるように指示するために、ここに何かが欠けている可能性があります。

ポートフォリオルーティング.module.ts

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

import { IndexComponent } from './index/index.component';
import { ListComponent } from './list/list.component';
import { CreateComponent } from './create/create.component';
import { UpdateComponent } from './update/update.component';

const routes: Routes = [
  {
    path: 'portfolio',
    component: IndexComponent,
    children: [
      {
        path: 'list',
        component: ListComponent
      },
      {
        path: 'create',
        component: CreateComponent
      },
      {
        path: 'update',
        component: UpdateComponent
      }
    ]
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PortfolioRoutingModule { }