Question

我正在尝试创建一个支持多个仪表板的Angular应用程序。在我的app-routing.module.ts中，我试图从这些不同的仪表板的定义路径下延迟加载所有组件。

我的app-routing.module.ts文件定义的路由如下：

// other initialization codes
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', loadChildren: './authentication/authentication.module#AuthenticationModule' },
{ path: 'dashboardAlpha1', loadChildren: './dash-alpha1/dash-alpha1.module#DashAlpha1Module' },
{ path: 'dashboardAlpha2', loadChildren: './dash-alpha2/dash-alpha2.module#DashAlpha2Module' }

在我的app.module.ts导入中，我将这些模块添加为：

// other codes
imports: [
// other modules
AppRoutingModule,
DashAlpha1Module,
DashAlpha2Module,
]

现在的问题是，当我尝试导航到dashboardAlpha1下的任何路线时，都可以正常工作。当我尝试导航到dasboardAlpha2下的任何路线时，出现错误：

 Component RespondentViewComponent is not part of any NgModule or the module has not been imported into your module

现在，两个仪表板都具有名称相同且使用相同路径的组件。例如，

/dashboardAlpha1/home
/dashboardAlpha2/home

基于登录，我必须重定向到仪表板之一。两个模块的设置方式相同。

我做错了什么？

编辑1

文件dash-alpha1-routing.module.ts

const routes: Routes = [
  { path: "", redirectTo: "home", pathMatch: "full" },
  { path: "home", component: DashAlpha1HomeComponent },
  { path: "stationView", component: StationViewComponent },
  { path: "profile", component: ProfileComponent },
  { path: "respondentView", component: RespondentViewComponent }
];

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

export class DashAlpha1RoutingModule { }

文件dash-alpha1.module.ts

import { DashAlpha1RoutingModule } from './dash-alpha1-routing.module';
import { DashAlpha1HomeComponent } from './dash-alpha1-home/dash-alpha1-home.component';
import { StationViewComponent } from './station-view/station-view.component';
import { ProfileComponent } from './profile/profile.component';
import { RespondentViewComponent } from './respondent-view/respondent-view.component';


@NgModule({
  declarations: [
    DashAlpha1HomeComponent, StationViewComponent, ProfileComponent, RespondentViewComponent
  ],
 imports: [
    CommonModule,
    DashAlpha1RoutingModule
 ],
 exports: [
    DashAlpha1HomeComponent, StationViewComponent, ProfileComponent, RespondentViewComponent
 ]
})
export class DashAlpha1Module { }

文件dash-alpha2-routing.module.ts

const routes: Routes = [
  { path: "", redirectTo: "home", pathMatch: "full" },
  { path: "home", component: DashAlpha2HomeComponent },
  { path: "stationView", component: StationViewComponent },
  { path: "respondentView", component: RespondentViewComponent },
  { path: "profile", component: ProfileComponent }
];

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

文件dash-alpha2.module.ts

import { DashAlpha2RoutingModule } from './dash-alpha2-routing.module';
import { DashAlpha2HomeComponent } from './dash-alpha2-home/dash-alpha2-home.component';
import { StationViewComponent } from './station-view/station-view.component';
import { ProfileComponent } from './profile/profile.component';
import { RespondentViewComponent } from './respondent-view/respondent-view.component';

@NgModule({
   declarations: [
DashAlpha2HomeComponent, StationViewComponent, ProfileComponent, RespondentViewComponent
   ],
   imports: [
      CommonModule,
      DashAlpha2RoutingModule
   ],
   exports: [
    DashAlpha2HomeComponent, StationViewComponent, ProfileComponent, RespondentViewComponent
   ]
  })
  export class DashAlpha2Module { }

延迟在Angular 6中加载多个模块

0 个答案: