title: Angular Routing for Children pages?
body: <p>I'm making a signup page that has its own components for each page.</p>
  
  <p>I had seen in a tutorial that you can use: <code>...SignUpRoutes</code> between the paths in the app-routing.module</p>
  
  <p>For example, currently I have within sign-up-routing.module;</p>
  
  <pre><code>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 {}
  </code></pre>
  
  <p>Then in app-routing-module:</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>I tried following the <a href="https://angular.io/guide/router#import-crisis-center-module-into-the-appmodule-routes" rel="nofollow noreferrer">Angular Routing</a> guide, however all pages are coming up as blank.
  if I manually navigate to <code>/sign-up/contact</code> the routing wildcard in app-routing.module redirects to home but as blank. If I try to navigate to <code>/sign-up/me</code> then the page sort of loads, but is blank, and forms are on page but not visible.</p>
  
  <p>Within the sign-up.component html template, there is a <code>&lt;router-outlet&gt;</code>.</p>
  
  <p>Am unsure how to proceed as it feels like i've hit a brick wall...
  Any help is much appreciated :)</p>