Ленивый загрузочный маршрутизатор угловой 6

Question

Возникли проблемы с Lazy Loading.Все URL показывают мне пустые страницы.

Структура:

- app.module.ts
- modules
   - router.module.ts
- scenes
   - dashboard
      - dashboard.module.ts
      - router.module.ts

У меня есть

imports: [
    RoutingModule,
]

в app.module.ts

routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

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

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

Обратите внимание, что у меня есть '../scenes', потому что он находится в разных папках с app.module.ts.

dashboard.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardRoutingModule } from './routing.module';
import { DashboardComponent } from './dashboard.component';
@NgModule({
    imports: [
        CommonModule,
        DashboardRoutingModule
    ],
    declarations: [DashboardComponent]
})
export class DashboardModule { }

routing.module.ts (в панели инструментов):

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';


const routes: Routes = [
    {
        path: '',
        component: DashboardComponent,
        children: [
            { path: 'transactions', loadChildren: './transactions#TransactionsModule' },
        ]
    }
];

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

Провереноhtml-код и у меня есть пустой маршрутизатор-выход, так что даже dashboard.component не загружается.

Также возможно заставить его работать с использованием файлов index.ts.Я имею в виду, будет ли это работать с этим?

{ path: 'transactions', loadChildren: './transactions#TransactionsModule' }

Транзакции - это папка с файлом index.ts , которая экспортирует все данные из модуля:

export * from './transactions.module';

ОШИБКА:

GET http://localhost:4200/dashboard/runtime.js net :: ERR_ABORTED 404 (не найдено)

РЕШЕНИЕ:

У меня был компонент с именем main и loadChildren: './main#MainModule' и именем сгенерированного чанка было main.js , но оно ужесуществует по умолчанию.

Answer 1

Кажется, твой код хорош.Как насчет ваших router-outlet директив?У вас должен быть один в вашем app.component.html и один в вашем dashboard.component.html

У меня есть похожий пример в моем репозитории github.Он имеет полную архитектуру стартера: https://github.com/dedd1993/ngx-admin

Answer 2

в app.module вам также нужно импортировать ваши дочерние модули, например:

app.module.ts

 imports: [
    UserRoutes,
    AppRoutingModule
] 

UserRoutes:

const userRoutesModule: Routes = [
  {
    path: '',
    component: UserComponent,
    children: [
      {
        path: 'domanda/edit',
        canDeactivate: [EditDomandaGuard],
        component: EditDomandaComponent,
      },
      {path: 'domanda', component: DomandaComponent},
      {path: 'help', component: HelpComponent},
    ]
  }
];

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

AppRoutingModule:

const routes: Routes = [
      {
        path: '',
        component: UserComponent,
        children: [
          {path: 'domanda/edit', component: EditDomandaComponent},
          {path: 'domanda', component: DomandaComponent},
          {path: 'help', component: HelpComponent},
        ]
      },
      {
        path: '',
        component: GuestComponent,
        children: [
          {path: 'help', component: HelpComponent},
          {path: 'login', component: LoginComponent},
        ]
      },
      {path: '**', component: PageNotFoundComponent}
    ];

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

Итак, ваш app.module.ts должен стать:

imports: [
DashboardRoutingModule,
    RoutingModule,
] 

Код взят из одного из моих репозиториев на github, не стесняйтесь посмотреть, как он работает: https://github.com/RabbitHols/pca/tree/dev/src/frontend/src/app/module/routes