Angular TypeError:undefined在导入两个模块时不是函数
我使用的是Angular TypeError:undefined在导入两个模块时不是函数,angular,angular6,Angular,Angular6,我使用的是Angular 6 我在LayoutModule下有两个布局模块(AdminLayout和AuthLayout) AdminLayoutModule的内容是 @NgModule({ imports: [ CommonModule, RouterModule.forChild(AdminLayoutRoutes), FormsModule, DashboardModule ], declarations: [ AdminLayoutCo
Angular 6
我在LayoutModule下有两个布局模块(AdminLayout和AuthLayout)
AdminLayoutModule的内容是
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(AdminLayoutRoutes),
FormsModule,
DashboardModule
],
declarations: [
AdminLayoutComponent
]
})
export class AdminLayoutModule { }
管理布局.路由.ts
export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard', loadChildren: '../../dashboard/dashboard.module#DashboardModule' }
];
export const AuthLayoutRoutes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full'},
{ path: 'login', component: LoginComponent},
{ path: 'logout', component: LogoutComponent}
];
并且admin layout.component.html已经
<h2>admin-layout works!</h2>
<router-outlet></router-outlet>
auth layout.routing.ts
export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard', loadChildren: '../../dashboard/dashboard.module#DashboardModule' }
];
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>
在AppModule中进一步导入
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(AuthLayoutRoutes),
FormsModule,
AuthModule
],
declarations: [
AuthLayoutComponent
],
exports: [
RouterModule
]
})
export class AuthLayoutModule { }
@NgModule({
imports: [
CommonModule,
AdminLayoutModule,
AuthLayoutModule
],
declarations: []
})
export class LayoutsModule { }
@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)
您不应将延迟加载的模块导入应用程序模块
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
LayoutsModule, //Remove this if this is your lazy load module
HttpClientModule,
RouterModule,
PagesModule
],
查看哪个路由会给您带来此错误?我无法访问任何路由,访问任何路由会将我重定向回控制台中出现此错误的
localhost:4100
。如果我们的功能模块不应导入app module
中,那么我们应该在哪里导入它呢?LayoutModule是保存其他模块的模块。它是从AdminLayout加载仪表板或从AuthModule加载LoginPage的主模块。删除LayoutModule后,会出现错误“未捕获错误:组件LayoutComponent不是任何NgModule的一部分,或者该模块尚未导入到您的模块中。”