mongodb - How to resolve Cannot read property 'loadChildren' of undefined

Question

I have a route like:

app-routing.module.ts

let routes: Routes;
routes = [
  {
    path: '',
    children: [
      {
        path: '',
        children: [
          {
            path: '',
            children: [
              {path: '', component: HeaderComponent, outlet: 'header'},
              {path: '', component: FooterComponent, outlet: 'footer'}
              // Routes that display a header and footer go here.
            ]
          },
          {
            path: '',
            children: [
              {
                path: '/frame',
                children: [{
                  path: 'search',
                  loadChildren: () => import('./search/search.module').then(module => module.SearchModule)
                }]
              }
            ]
          }
        ]
      }
    ]
  }
];

app.module.ts

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

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

When running npm start I get the error

Cannot read property 'loadChildren' of undefined

标签： mongodb.net-coreasp.net-core-webapimongodb-.net-driver

Answer 1

Cause: routes variable was not defined as a constant.

Very specifically, while I was in ng serve (npm start) mode and the browser was at the /frame/search path, I modified the routes file to include a ** path (just randomly adding stuff from another working application).

let routes: Routes;
routes = [
  {
    path: '',
    children: [
      {
        path: '',
        children: [
          {
            path: '',
            children: [
              {path: '', component: HeaderComponent, outlet: 'header'},
              {path: '', component: FooterComponent, outlet: 'footer'}
              // Routes that display a header and footer go here.
            ]
          },
          {
            path: '',
            children: [
              {
                path: '/frame',
                children: [{
                  path: 'search',
                  loadChildren: () => import('./search/search.module').then(module => module.SearchModule)
                }]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    path: '**',
    redirectTo: '/frame/search',
    pathMatch: 'full'
  }
];

The browser refreshed and there was a console error:

Uncaught Error: Component HeaderComponent is not part of any NgModule or the module has not been imported into your module.

So sure enough, I had not added those imports to the app.module. I don't know if the error message presented simply by making any change or by adding this specific route change. I do know that if I ran npm start after adding the ** path, I could not get the console error to present.

After adding those imports:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FooterModule } from './footer/footer.module';
import { HeaderModule } from './header/header.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HeaderModule,
    FooterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I got another console error:

Invalid configuration of route '/frame': path cannot start with a slash

I fixed that:

let routes: Routes;
routes = [
  {
    path: '',
    children: [
      {
        path: '',
        children: [
          {
            path: '',
            children: [
              {path: '', component: HeaderComponent, outlet: 'header'},
              {path: '', component: FooterComponent, outlet: 'footer'}
              // Routes that display a header and footer go here.
            ]
          },
          {
            path: '',
            data: {header: false, footer: false},
            children: [
              {
                path: 'frame',
                children: [{
                  path: 'search',
                  loadChildren: () => import('./search/search.module').then(module => module.SearchModule)
                }]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    path: '**',
    redirectTo: '/frame/search',
    pathMatch: 'full'
  }
];

And I was good to go (or so I thought).

npm start was still throwing the error.

Comparing the route files between a new project and mine, I noticed that routes was defined as a constant. I probably had copied in the routes from a prior project, or WebStorm modified the code somehow, not sure.

So finally my working app-routes.

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        children: [
          {
            path: '',
            children: [
              {path: '', component: HeaderComponent, outlet: 'header'},
              {path: '', component: FooterComponent, outlet: 'footer'}
              // Routes that display a header and footer go here.
            ]
          },
          {
            path: '',
            data: {header: false, footer: false},
            children: [
              {
                path: 'frame',
                children: [{
                  path: 'search',
                  loadChildren: () => import('./search/search.module').then(module => module.SearchModule)
                }]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    path: '**',
    redirectTo: '/frame/search',
    pathMatch: 'full'
  }
];