Angular Routing for Children pages?

Question

I'm making a signup page that has its own components for each page.

I had seen in a tutorial that you can use: ...SignUpRoutes between the paths in the app-routing.module

For example, currently I have within sign-up-routing.module;

export const SignUpRoutes: Routes = [
    {
      path: 'sign-up',
      component: SignUpComponent,
      children: [
    { path: 'me',  component: MeComponent },
    { path: 'contact',  component: ContactComponent },
    { path: 'payment',  component: PaymentComponent }
      ]
    }
];

@NgModule({
  imports: [RouterModule.forChild(SignUpRoutes)],
  exports: [RouterModule]
})

export class SignUpRoutingModule {}

Then in app-routing-module:

const routes: Routes = [

  {
    path: '', component: HomeComponent  
  },
  {
    path: 'sign-up', component: SignUpComponent 
  },
  ...SignUpRoutes,
  {
    path: 'login', component: LoginComponent
  },
  {
    path: '**', redirectTo: ''
  }
];


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

I tried following the Angular Routing guide, however all pages are coming up as blank. if I manually navigate to /sign-up/contact the routing wildcard in app-routing.module redirects to home but as blank. If I try to navigate to /sign-up/me then the page sort of loads, but is blank, and forms are on page but not visible.

Within the sign-up.component html template, there is a <router-outlet>.

Am unsure how to proceed as it feels like i've hit a brick wall... Any help is much appreciated :)

Answer 1

I think you are trying to do something call Lazy Loading.

This is working like that :

In your AppRoutingModule :

const routes: Routes = [

  {
    path: '', component: HomeComponent
  },
  {
    path: 'sign-up', component: SignUpComponent,
    loadChildren: './signup/signup.module#SignupModule
  },
  {
    path: 'login', component: LoginComponent
  },
  {
    path: '**', redirectTo: ''
  }
];

You need a new module (in my example the name is signup). In this module (or in the rooting module file associate with) you will need to have those routes :

const routes: Routes = [
  {
    path: '',
    component: SignUpComponent
  },
  { 
    path: 'me',
    component: MeComponent
  },
  {
    path: 'contact',
    component: ContactComponent
  },
  { 
    path: 'payment',
    component: PaymentComponent
  }   
];

Hope it helps.

Answer 2

I got your stackblitz far enough to get something to display. But at this point I don't know enough about what you are trying to do to go much further. Here is an updated stackblitz: https://stackblitz.com/edit/sign-up-page-angular-with-children-chj5zx

The next issue is that the signup component routes to the signup component. I think that may be a copy/paste issue with your original home component?

Answer 3

Thank you @Deborahk for the help! Comparing your github repo with the sub pages helped understand how routing works, by loading a module as a child.

The 2 major issues as to why it wasn't working were:

• Authguards were being imported and breaking page
• Routing in App-Routing-Module was loading sign-up page, and then tried to place child page on top breaking the page. The fix loaded the sign-up page as a child to the route sign-up, so that the children were directed through to sign-up route.

For reference, the changes to enable routing were:

The signup.module file:

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

import { SignupComponent } from './signup.component';
import { Step1Component } from './step1/step1.component';
import { Step2Component } from './step2/step2.component';
import { Step3Component } from './step3/step3.component';

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: '',
        component: SignupComponent,
        children: [
          {
            path: '',
            redirectTo: 'step1',
            pathMatch: 'full'
          },
          {
            path: 'step1',
            component: Step1Component
          },
          {
            path: 'step2',
            component: Step2Component
          },
          {
            path: 'step3',
            component: Step3Component
          }
        ]
      }
    ])
  ],
  declarations: [
    SignupComponent,
    Step1Component,
    Step2Component,
    Step3Component
  ],
  providers: [
  ]
})
export class SignupModule { }

And the App-routing file:

const routes: Routes = [


  { path: '', component: HomeComponent },

  { path: 'sign-up', children: [
      { path: '',  data: { preload: true },
      loadChildren: 'app/user/sign-up/signup.module#SignupModule' },
    ]},
  { path: '**', redirectTo: '' }
];

And in the signup component HTML,

  <router-outlet></router-outlet>

was used to correctly navigate to the desired child page.

Thanks all for your input and guidance!