Question

我懒地用Angular加载模块，但是如果我导航到URL而没有提供路由路径，例如http://localhost:4200会在我期望加载about.module时加载我的home.module。正确加载模块可以按预期工作。

每个模块都有一个*-routing.module：

app-routing.module.ts

/* ... */

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./modules/about/about.module').then(m => m.AboutModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'page-not-found'
  }
];

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

/* ... */

home-routing.module.ts

/* ... */

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    data: {
      title: 'Home'
    }
  }
];

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

/* ... */

about-routing.module.ts

/* ... */

const routes: Routes = [
  {
    path: '',
    component: AboutComponent,
    data: {
      title: 'About'
    }
  }
];

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

/* ... */

我尝试过且针对较旧版本Angular的其他解决方案似乎不起作用：

Unable to redirect to Lazy Loaded module as default route/url on server start up

在这种情况下，我正在使用Angular 8 +。

Answer 1

非常及时，因为从7.2.5升级到8.1.3后，我似乎遇到了同样的问题。在我确定更新后，可以很好地执行重定向，并且在过去的12-24小时后，有些事情不经意间发生了变化，使我觉得自己很疯狂。如果我直接进入/ home，则没有问题，但是localhost：4200不会重定向，但没有错误。

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', loadChildren: () => import(`./shell/home/home.module`).then(m => m.HomeModule) }
    ]),

home.module.ts

import { HomeComponent } from './home.component';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { HomeRoutingModule } from './home-routing-module';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    HomeRoutingModule
  ],
  declarations: [
      HomeComponent
  ],
  exports: [RouterModule],
  schemas: [ NO_ERRORS_SCHEMA ]
})
export class HomeModule { }

home-routing-module.ts

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

import { HomeComponent } from './home.component';
import { NgModule } from '@angular/core';

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

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

Answer 2

我有同样的问题。路线更改时，已加载2个模块。在首页上，它还会加载库存模块。很烦。它破坏了整个延迟加载的想法。

我正在运行Angular 8.2.14

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdalGuard } from 'adal-angular4';

const AppRoutes: Routes = [
  {path: 'settings', loadChildren: () => import('./modules/settings/settings.module').then(m => m.SettingsModule), canActivate: [AdalGuard]},
  {path: '', loadChildren: () => import('./modules/my-workorders/my-workorders.module').then(m => m.MyWorkordersModule), canActivate: [AdalGuard]},
  {path: ':id', children: [
    {path: '', loadChildren: () => import('./modules/workorder-details/workorder-details.module').then(m => m.WorkorderDetailsModule), canActivate: [AdalGuard]},
    {path: 'inventory-management', loadChildren: () => import('./modules/inventory-management/inventory-management.module').then(m => m.InventoryManagementModule), canActivate: [AdalGuard]},
    {path: 'toolbox-talk', loadChildren: () => import('./modules/toolbox-talk/toolbox-talk.module').then(m => m.ToolboxTalkModule), canActivate: [AdalGuard]},
    {path: 'operations', loadChildren: () => import('./modules/operations/operations.module').then(m => m.OperationsModule), canActivate: [AdalGuard]},
    {path: 'work-permits', loadChildren: () => import('./modules/work-permits/work-permits.module').then(m => m.WorkPermitsModule), canActivate: [AdalGuard]},
    {path: 'object-list', loadChildren: () => import('./modules/object-list/object-list.module').then(m => m.ObjectListModule), canActivate: [AdalGuard]},
    {path: ':flid', loadChildren: () => import('./modules/history/history.module').then(m => m.HistoryModule), canActivate: [AdalGuard]}
  ]},

  { path: '**', redirectTo: '/', pathMatch: 'full' }
];

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

使用Angular延迟加载的模块设置默认路由

2 个答案: