Ленивый модуль возвращает пустую страницу - PullRequest
Новая
       6

Ленивый модуль возвращает пустую страницу

0 голосов
/ 20 мая 2018

Я запускаю Angular CLI 6.0.2 и пытаюсь использовать Lazy Module нагрузку для некоторых компонентов.

Я следовал документации и настроил app.module, как показано ниже: 

    const appRoutes: Routes = [
  {
    path      : '',
    component: LoginComponent
  },
    {
        path      : 'main',
        component: FuseMainComponent,
      canActivate: [AuthguardService]
    },
  {
    path      : 'appqos',
    component: AppqosComponent,
    canActivate: [AuthguardService]
  },
  {
    path      : 'tasks',
    // component: TaskviewerComponent,
    // canActivate: [AuthguardService]
    loadChildren: './taskviewer/taskviewer.module#TaskviewerModule'

imports: [
...,
 RouterModule.forRoot(appRoutes)
]

lazy module для загрузки устанавливается следующим образом: 

 const routes: Routes = [
  {
    path: 'tasks',
    component: TaskviewerComponent
  }
];

@NgModule({
  imports: [
    CommonModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    MatSortModule,
    MatChipsModule,
    MatCheckboxModule,
    MatSelectModule,
    NgxDatatableModule,
    MatButtonModule,
    MatTooltipModule,
    RouterModule.forChild(routes)

  ],
  declarations: [TaskviewerComponent],
  exports: [
    TaskviewerComponent, RouterModule
  ]

})
export class TaskviewerModule { }

Когда я просматриваю маршрут «задачи», компоненты отображаются в виде пустой страницы.Я не вижу ошибок в консоли.На вкладке сети он просто показывает загрузочный файл taskviewer-taskviewer-module-ngfactory.js вместо chunk.js

Я пробовал разные учебники и официальную документацию, а также использовал ng serve --aot, но это дает тот же результат.

Есть ли способ узнать, почему компонент не отображается правильно и возвращает пустую страницу?

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

URL для TaskviewerComponent равен localhost:4200/tasks/tasks.если вы хотите что-то вроде localhost:4200/tasks в дочернем маршруте, определите: 

const routes: Routes = [
  {
    path: '', // <-- no name path here
    component: TaskviewerComponent
  }
];

посмотрите на https://angular.io/guide/router#lazy-loading-route-configuration в app-routing.module.ts и кризис-center-routing.module.ts для получения маршрута по умолчанию для лениво загруженных модулей.

0 голосов
/ 20 мая 2018

Извините, на самом деле мой ленивый модуль должен иметь путь: ''

Я должен был проверить более тщательно.

...