Angular 5 Lazy Loading Route Module with Children

Question

I'm having a really difficult time trying to figure out why the TEST 1 children aren't loading the current component

Test1ListComponent view displays after I route to Test1ChildComponent. The URL changes, but Test1ChildComponent view does not load

Route tree:

app-routing.module

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full'
  },
  {
    path: 'app',
    loadChildren: './core/core.module#CoreModule'
  }
];

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

core-routing.module

const routes: Routes = [
  {
    path: '',
    redirectTo: '/', 
    pathMatch: 'full'
  },
  {
    path: 'test1',
    loadChildren: '../test1/test1.module#Test1Module'
  },
];

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

test1-routing.module

const routes: Routes = [
  {
    path: '',
    redirectTo: 'test1',
    pathMatch: 'full'
  },
  {
    path: '',
    component: Test1ListComponent,
    data: {
      displayName: 'Test1'
    },
    children: [
      {
        path: 'test1/:testId',
        component: Test1ChildComponent,
        data: {
          displayName: 'Test1Child'
        },
    children: [
          {
            path: 'test2/:testId',
            component: Test2hildComponent,
            data: {
              displayName: 'Test2Child'
            }
          }
        ]
      }
    ]
  },
];

I can get to `Test1ListComponent`, but when I land on the Test1ChildComponent with the correct path, the url changes, but I remain on the `Test1ListComponent` view — Davis, Jun 10 '18 at 20:23

izmaylovdev · Answer 1 · 2018-06-10T22:19:44.387

0

const routes: Routes = [
  {
    path: '',
    redirectTo: 'test1',
    pathMatch: 'full'
  },
  {
    path: 'test1',
    component: Test1ListComponent,
    data: {
      displayName: 'Test1'
    },
    children: [
      {
        path: '',
        redirectTo: 'test1',
        pathMatch: 'full'
      },
      {
        path: 'test1/:testId',
        component: Test1ChildComponent,
        data: {
          displayName: 'Test1Child'
        },
        children: [
          {
            path: 'test2/:testId',
            component: Test2hildComponent,
            data: {
              displayName: 'Test2Child'
            }
          }
        ]
      }
    ]
  },
];

edited Jun 10 '18 at 22:19

answered Jun 10 '18 at 20:20

izmaylovdev

1,828
8
16

Thanks for quickly posting an idea! I'm sorry to say, this did not work. Do you have any other suggestions? – Davis Jun 10 '18 at 20:48
what path you use to get Test1ChildComponent? – izmaylovdev Jun 10 '18 at 22:04
It's not the path – Davis Jun 10 '18 at 22:11
It has to do with lazy loading this mods – Davis Jun 10 '18 at 22:11
i mean what url on browser you wanna use to get this component – izmaylovdev Jun 10 '18 at 22:14
now you must get this compoent by url `/app/test1/test1/test1/{id}` – izmaylovdev Jun 10 '18 at 22:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/172858/discussion-between-izmaylovdev-and-davis). – izmaylovdev Jun 10 '18 at 22:31

Angular 5 Lazy Loading Route Module with Children

1 Answers1