Angular 2 routing redirect to with child routes

Question

I am a newbie in Angular 2. I want to create isolated modules for every part of my app. For example I created the AuthModule with default component - AuthComponent which contain a router-outlet for his child components (SignIn or SignUp). So I want to realise the following scenario:

1. When navigate to / - root off app - redirect to /auth
2. After redirect to /auth - load AuthComponent with router outlet
3. After AppComponent loaded - load default sign-in component via redirecting to /auth/sign-in

But when I going to localhost/ I get redirect to /auth what I want, but the next redirect to sign-in doesn't appear.

My code: app.routing

const routes: Routes = [
  {
      path: '', 
      redirectTo: '/auth', 
      pathMatch: 'full'
  }
];

export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);

auth.routing

const routes: Routes = [
  {
    path: 'auth',
    component: AuthComponent,
    children: [
      {
         path: '', 
         redirectTo: 'sign-in', 
         pathMatch: 'full'
      },
      {
         path: 'sign-in', 
         component: SignInComponent
      }
    ]
  },

];

export const authRouting: ModuleWithProviders = RouterModule.forChild(routes);

auth.component.html

<div class="container">
    <h1>Auth component</h1>
    <router-outlet></router-outlet>
</div>

Result:

Environment @angular/cli: 1.0.0-rc.2 node: 7.7.1 os: win32 x64

Answer 1

I have been the same problem. It seems an Angular tricks: If you remove leading slash in 'redirectTo' field, your application will be redirected successfully to auth/sign-in.

Use this in app.routing:

const routes: Routes = [ 

    {path: '', redirectTo: 'auth', pathMatch: 'full'}, 

];

‘redirectTo’ value starts with a ‘/’ = absolute path

‘redirectTo’ value starts without a ‘/’ = relative path

Read more about it: https://vsavkin.com/angular-router-understanding-redirects-2826177761fc

P.S My opinion that your structure more correctly then YounesM's one. Parent module can't keep children routes: "app" module don't know that "auth" module have children module "sign-in".