Переадресация маршрута по умолчанию не работает для ленивых загруженных маршрутов в Angular 2

Ответ 1

Я предполагаю, что AccountModule импортируется в корневой модуль.

Это общая настройка, которая должна работать. Извините, я не использовал весь ваш код, потому что я думал, что это будет более понятно с минимальным, но полным примером. Я комментирую потенциальные проблемы, которые приведут к поведению, которое вы наблюдаете. Я не могу быть полностью уверен, что это решит вашу конкретную проблему без дополнительной информации, но она по крайней мере схожа и должна быть полезной для кого-то.

выполните следующую настройку, в которой используется ленивая загрузка модуля:

ПРИМЕЧАНИЕ. - ленивая загрузка может привести к неожиданному поведению из-за router модуль импорта дочерних маршрутов, особенно если у вас есть услуги, входящие в ваши функциональные модули, что требует импорта корневого уровня (возможно, лучше всего разделить службы на свои собственные модули). Комментарии ниже должны объяснить, что я имею в виду.

Урок состоит в том, чтобы только один раз вводить ленивые модули с маршрутами. (Не делать этого означает, что модуль больше не может лениться и полностью побеждает цель ленивой загрузки), если у вас есть связанные с ними сервисы, которые должны быть в корневом разделе, в другой сервисный модуль для root

app.module.ts

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

import { AppComponent } from './app.component.ts';
import { routes } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    // I think this might be your issue.
    // DON'T do this (import child module here)
    //
    // MaleChildModule
    // or somethings like this
    // FemaleChildModule.forRoot()
    //
    // NOTE - order doesn't matter either. i.e. putting this on the
    // line above RouterModule.forRoot(routes) will not help
    // 
    // Doing so means the ChildModules and routes are actually being
    // imported twice
    //
    // so these would all be valid paths
    // /female/sally
    // /sally
    // /male/john
    // /john
    //
    // then if you had a module routes set up like those in 
    // the MaleChildModule the root redirect to /child
    // would not work and it would just be a blank view with no path
    // update in the browser. very confusing situation.
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'ex-app',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {}

приложение-routing.module.ts

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

export const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'males'
  },
  {
    path: 'males',
    loadChildren: './male-child.module#MaleChildModule'
  },
  {
    path: 'females',
    loadChildren: './female-child.module#FemaleChildModule'
  }
]

ПРИМЕЧАНИЕ. - ленивые загружаемые модули импортируют RouterModule.forChild(маршруты), которые могут привести к неожиданному поведению, если не осторожны.

мужчины-child.module.ts

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

import { JohnChildComponent } from './john-child.component.ts';

// NOTE - if you set up your child module like this and make the
// mistake I'm describing (importing child modules multiple times)
// you will get unexpected behavior of redirects not working and
// no clues as to why. I suggest always having empty paths redirect
// to something with a component. FemaleChildModule is an example.
const childRoutes: Routes = [
  {
    path: 'john',
    component: JohnChildComponent
  }
]

@NgModule({
  imports: [
    RouterModule.forChild(childRoutes)
  ],
  declarations: [
    JohnChildComponent
  ]
})
export class MaleChildModule {}

женские-child.module.ts

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

import { SallyChildComponent } from './sally-child.component.ts';

const childRoutes: Routes = [
  {
    path: '',
    children: [
      // NOTE - I like to setup lazy loaded modules like this because
      // it prevents masking of the module loading issue because there
      // are never any paths that don't have an associated component
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'sally',
      },
      {
        path: 'sally',
        component: SallyChildComponent
      }
   ]
  }
]

@NgModule({
  imports: [
    RouterModule.forChild(childRoutes)
  ],
  declarations: [
    SallyChildComponent
  ]
})
export class FemailChildModule {}

JOHN-child.component.ts

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'ex-john',
  template: '<p>john</p>'
})
export class JohnChildComponent {}

Sally-child.component.ts

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'ex-sally',
  template: '<p>sally</p>'
})
export class SallyChildComponent {}