延迟加载模块中的角共享模块

最后发布: 2018-07-05 17:19:48


问题

我的应用程序有2个主要模块

-- app module
-- dashboard module //lazy loaded

应用程序模块具有容器homeComponent ,其中包含navbarComponentheroComponent我想将navbarComponent导入到dashboard module的子组件中,因此我将navbar设为共享模块,导出了navbar并将共享模块导入了app.module和仪表板中模块。

这就是app.module的路由方式

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'tours',
    loadChildren: './dashboard/dashboard.module#DashboardModule'
  },
  {
    path: '**',
    redirectTo: ''
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

这是用于延迟加载的模块

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    runGuardsAndResolvers: 'always',
    resolve: {
      tours: PreloadGuard
    }
  },
  {
    path: 'tourDetails',
    component: DetailsComponent,
    runGuardsAndResolvers: 'always',
    resolve: {
      selectedtour: DetailsGuard
    }
  },
  {
    path: '**',
    redirectTo: ''
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

路由器出口在appComponent中并且在路线``上,它将在家庭中的导航栏上很好地加载。 但是一旦我导航到应该加载延迟加载的模块的“ / tours”,它就会记录一个错误,即HomeComponent不属于任何模块!

angular lazy-loading angular6 angular-router