Angular 2 routing redirect to with child routes

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".

On auth.routes

const routes: Routes = [  {    path: "auth",    redirectTo: "auth/sign-in"  },  {    path: "auth",    component: AuthComponent,    children: [{ path: "sign-in", component: SignInComponent }]  }];

So, what it seems to happen is that when you redirectTo:'auth' it tries to load the '' children's component and since it does not have any component the router-outlet is empty.

Now it seems like {path: '', redirectTo: 'sign-in', pathMatch: 'full'} doesn't have any other purpose then redirecting to sign-in so you can simply redirect to /auth/sign-in instead.

app.routes

const routes: Routes = [  {path: '', redirectTo: '/auth/sign-in', pathMatch: 'full'}];export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);

auth.routes

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

or have a component in your '' path instead of redirecting.

app.routes

const routes: Routes = [  {path: '', redirectTo: '/auth', pathMatch: 'full'}];export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);

auth.routes

const routes: Routes = [  {    path: 'auth',    component: AuthComponent,    children: [      {path: '', component: SignInComponent}    ]  },];