默认路由重定向不适用于 Angular 2 中的延迟加载路由

Question

I have an app that is divided into a authenticated section (InternalRootComponent) and an anonymous section (ExternalRootComponent).

Everything works fine when I navigate to the routes explicitly, but when I go to the root (/), I don't get redirected. Also, the AccountsComponent is loaded for some reason.

app-routing.module.ts:

export const routes: Routes = [
    {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
    },
    {
        path: 'login',
        component: ExternalRootComponent,
        children: [
            {
                path: '',
                loadChildren: './login/login.module#LoginModule'
            }
        ]
    },
    {
        path: 'membership',
        component: ExternalRootComponent,
        children: [
            {
                path: '',
                loadChildren: './membership/membership.module#MembershipModule'
            }
        ]
    },
    {
        path: 'app',
        component: InternalRootComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: '',
                canActivateChild: [AuthGuard],
                children: [
                    {
                        path: '',
                        redirectTo: './dashboard',
                        pathMatch: 'full'
                    },
                    {
                        path: 'dashboard',
                        loadChildren: './dashboard/dashboard.module#DashboardModule'
                    },
                    {
                        path: 'accounts',
                        loadChildren: './accounts/accounts.module#AccountsModule'
                    },
                    {
                        path: 'users',
                        loadChildren: './users/users.module#UsersModule'
                    },
                    {
                        path: 'services',
                        loadChildren: './services/services.module#ServicesModule'
                    },
                    {
                        path: 'support',
                        loadChildren: './support/support.module#SupportModule'
                    }
                ]
            }
        ]
    },
    {
        path: '**',
        component: NotFoundComponent
    }
];

accounts-routing.module.ts:

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

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

What I don't understand is why the first redirect doesn't work - I would expect / to redirect to /login. Instead, it seems as if the empty route in accounts-routing.module.ts is being invoked.

Answer 1

My guess is that AccountModule is imported into the root module.

This is a generic setup that should work. Sorry I did not use all of your code because I thought it would be more clear with a minimum yet complete example. I put comments of potential problems that would lead to the behavior you are observing. I can't be entirely sure this will solve your exact problem without more info but it is at the very least similar and should be helpful to somebody.

take the following setup that uses module lazy loading:

NOTE - lazy loading can lead to unexpected behavior because of the the router module importing of child routes, especially if you have services bundled into your feature modules which necessitates root level imports (probably best to separate the services into their own modules though). Comments below should explain what I mean by this.

The lesson is to only import lazy modules with routes once. (Not doing so means the module can no longer be lazy and defeats the purpose of the lazy loading altogether) if you have services bundled in with them that need to be in the root separate those into a different service module for the 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's 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 {}

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

NOTE - lazy loaded modules import RouterModule.forChild(routes) which can lead to unexpected behavior if not careful

male-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 {}

female-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 {}

Answer 2

If you're using lazy loading routes, the Global routes must also be included in app.module.ts in order the redirectTo and other routes functionality to work everywhere in the app module.

I architected my project where the coreModule is outsourced from the appModule where the main routes is imported in it

And in my appModule the coreModule is imported as well as the 'AppRoutingModule' (my main routes)