Typeerror: undefined не является функцией при импорте двух модулей в angular

Пользуюсь Angular 6.

У меня есть два модуля макета (AdminLayout и AuthLayout) в LayoutModule

Содержимое AdminLayoutModule составляет

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(AdminLayoutRoutes),
    FormsModule,
    DashboardModule
  ],
  declarations: [
    AdminLayoutComponent
  ]
})
export class AdminLayoutModule { }

админ-layout.routing.ts

export const AdminLayoutRoutes: Routes = [
  { path: 'dashboard', loadChildren: '../../dashboard/dashboard.module#DashboardModule' }
];

и admin-layout.component.html имеет

<h2>admin-layout works!</h2>

<router-outlet></router-outlet>

Аналогично содержимое AuthLayoutModule

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(AuthLayoutRoutes),
    FormsModule,
    AuthModule
  ],
  declarations: [
    AuthLayoutComponent
  ],
  exports: [
    RouterModule
  ]
})
export class AuthLayoutModule { }

auth-layout.routing.ts

export const AuthLayoutRoutes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full'},
  { path: 'login', component: LoginComponent},
  { path: 'logout', component: LogoutComponent}
];

auth-layout.component.html

<h2>auth-layout works!</h2>

<router-outlet></router-outlet>

и оба AdminLayoutModule и AuthLayoutModule импортируются в LayoutModule

@NgModule({
  imports: [
    CommonModule,
    AdminLayoutModule,
    AuthLayoutModule
  ],
  declarations: []
})
export class LayoutsModule { }

Который далее импортируется в AppModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,

    LayoutsModule,

    HttpClientModule,
    RouterModule,
    PagesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Но когда я запускаю сервер, он не выдает ошибок во время компиляции, но выдает ошибку при посещении URL-адреса в браузере.

core.js:1673 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext ($_lazy_route_resource lazy namespace object:21)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:4982)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:4974)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3261)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3249)
    at MergeMapSubscriber.project (router.js:1519)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:61)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at Array.map (<anonymous>)
    at webpackAsyncContext ($_lazy_route_resource lazy namespace object:21)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:4982)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:4974)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3261)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3249)
    at MergeMapSubscriber.project (router.js:1519)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:61)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3811)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

Когда я комментирую любой макет, импортированный в LayoutModule, другой работает нормально. Но импорт обоих вместе дает ошибку выше.

маршруты определены в app-routing.module.ts как

const routes: Routes = [
  { path: 'auth', loadChildren: './layouts/auth-layout/auth-layout.module#AuthLayoutModule' },
  { path: 'admin', loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'},
  { path: '', redirectTo: 'admin/dashboard', pathMatch: 'full'},
  { path: '**', component: PageNotFoundComponent},
];

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

какой маршрут дает вам эту ошибку?

Sarthak Aggarwal 26.10.2018 08:28

Я не могу получить доступ к каким-либо маршрутам, и посещение любого маршрута перенаправляет меня обратно на localhost:4100 с этой ошибкой в ​​консоли.

Anuj TBE 26.10.2018 08:58
2
2
2 490
1

Ответы 1

Вы не должны импортировать лениво загруженный модуль в свой app-module

  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    LayoutsModule,  //Remove this if this is your lazy load module
    HttpClientModule,
    RouterModule,
    PagesModule
  ],

Посмотрите на Github Issue.

если наш функциональный модуль не должен быть импортирован в app-module, куда мы должны тогда его импортировать?

Sarthak Aggarwal 26.10.2018 08:36
LayoutModule - это модуль, который содержит другие модули. Это основной модуль для загрузки Щиток приборов из AdminLayout или Страница авторизации из AuthModule.
Anuj TBE 26.10.2018 08:57

После удаления LayoutsModule angular выдает ошибку «Неперехваченная ошибка: компонент LayoutComponent не является частью какого-либо NgModule или модуль не был импортирован в ваш модуль».

Amila Thennakoon 26.08.2019 05:29

Другие вопросы по теме