• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

43
Views
Children routes don't work as expected

Let's say the AppModule is the root module of the app. Its routing file looks like this:

...
const appRoutes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  {
    path: 'auth',
    loadChildren: './modules/auth/auth.module#AuthModule',
  }
]
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

AuthModule routing file looks like this:

...
const authRoutes: Routes = [
  {
    path: '',
    loadChildren: './login/login.module#LoginModule',
  },
  {
    path: 'registration',
    loadChildren: './registration/registration.module#RegistrationModule'
  }
];
export const authRouting: ModuleWithProviders = RouterModule.forChild(authRoutes);

Everything works fine when LoginModule routing file looks like this:

const loginRoutes: Routes = [
  { path: '', component: LoginStep1Component },
  { path: 'a', component: LoginStep2Component }
];
export const loginRouting: ModuleWithProviders = RouterModule.forChild(loginRoutes);

But some troubles appear when I try to use some base component to wrap Login components via <router-outlet> having the router file as following:

const loginRoutes: Routes = [
  {
    path: '',
    component: LoginComponent,
    children: [
      { path: '', component: LoginStep1Component, pathMatch: "full" /*tried also without pathMatch*/ },
      { path: 'a', component: LoginStep2Component }
    ]
  }
];

The localhost:4200/auth works fine displaying the LoginStep1Component.

But localhost:4200/auth/a doesn't work. I can't access it and view LoginStep2Component neither via link navigation nor via URL bar of the browser.

I have also tried to replace '' with some path but it didn't help either. I don't consider this as a proper solution.

3 months ago ·

Santiago Trujillo

Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.