组件MenuComponent不是任何NgModule的一部分，或者模块尚未导入模块

Question

我的文件夹结构如下所示：

此外，我的menu-routing.module.ts如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes, Router } from '@angular/router';
import { MenuComponent } from '../menu.component';
import { TransactionsComponent } from '../transactions/transactions.component';

const menuRoutes: Routes = [
    {
        path: 'menu',
        component: MenuComponent,
        children: [
            {
                path: 'transactions',
                component: TransactionsComponent
            },

        ]
    }
];

@NgModule({
  imports: [
      CommonModule,
      RouterModule.forChild(menuRoutes)      
    ],
  exports: [
      RouterModule
  ],
  declarations: []
})


export class MenuRoutingModule { }

// app.module.ts

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

import { AppComponent } from './app.component';
import { LoginComponent } from './view/login/login.component';
import { MenuComponent } from './view/menu/menu.component'
import { RouterModule, Routes, Router, PreloadAllModules } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { TransactionsComponent } from './view/menu/transactions/transactions.component';
//import { MenuRoutingModule } from './view/menu/menu-routing/menu-routing.module';

const appRoutes: Routes = [
    { path: '', component: LoginComponent },
    {
        path: 'menu',
        loadChildren: './view/menu/menu-routing/menu-routing.module#MenuRoutingModule'
    },

];

@NgModule({
  declarations: [
        AppComponent,
        LoginComponent ,
        MenuComponent,
        TransactionsComponent
    ],
  imports: [
      BrowserModule,
      RouterModule.forRoot(
          appRoutes,
          {
              preloadingStrategy: PreloadAllModules
          }
      ),      
      HttpClientModule
  ],
  exports: [
      RouterModule      
  ],
  providers: [],
  bootstrap: [AppComponent]  
})
export class AppModule {

}

实际上，我的菜单页面将包含侧边菜单，点击每个菜单右侧页面应该通过嵌套路由更改。

我的menu.html看起来像这样：

<div class="header">
  <img class="headerAlign" id="logo" src="../../../assets/images/flydubai-logo.png">
  <i class="fa fa-power-off pull-right glTxtBlue headerAlign btnLogout" aria-hidden="true"></i>
  <p class="pull-right glTxtBlue headerAlign" id="username">Hi Manoj</p>

</div>

<div class="mainPage">
  <nav id="sidebar">
    <ul>
      <li class="active">
        <a href="#">
          <i class="glyphicon glyphicon-home"></i>
          Dashboard
        </a>
      </li>
      <li class="active">
        <a href="#adminSubMenu" data-toggle="collapse" aria-expanded="false">
          <i class="glyphicon glyphicon-user"></i>
          Admin
        </a>
        <ul class="collapse" id="adminSubMenu">
          <li><a href="#">Users</a></li>
          <li><a href="#">Key Management</a></li>
          <li><a href="#">Activate/Deactivate Card</a></li>
        </ul>
      </li>
      <li>
        <a href="#configSubMenu" data-toggle="collapse" aria-expanded="false">
          <i class="glyphicon glyphicon-cog"></i>
          Configuration
        </a>
        <ul class="collapse" id="configSubMenu">
          <li><a href="#">System</a></li>
          <li><a href="#">Gateway</a></li>
          <li><a href="#">API Authorizations</a></li>
        </ul>
      </li>
      <li class="active" (click) ="routeTransaction()">
        <a >
          <i class="glyphicon glyphicon-cog"></i>
          Transaction
        </a>
      </li>
      <li class="active">
        <a href="#">
          <i class="glyphicon glyphicon-briefcase"></i>
          Refund Management
        </a>
      </li>
    </ul>
  </nav>

  <div class="pageContent">

    <router-outlet></router-outlet>

  </div>
</div>

请帮助我解决这个问题，并坚持了很久。

如果需要澄清以便更好地了解我的情况，请告诉我。