延遲加載路由器Angular 6

Question

延遲加載遇到了一些麻煩。 所有網址均顯示空白頁面。

結構體：

- 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' }

Transactions是包含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

在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

Answer 2

看來您的代碼不錯。 您的router-outlet指令如何？ 桅桿中的app.component.html文件中有一個，而dashboard.component.html文件中有一個

我在github倉庫中有一個類似的例子。 它具有完整的架構入門： https : //github.com/dedd1993/ngx-admin