Ionic lazy loading a module within children array

Question

I have an Ionic application with a List Page Module and a Subdir Page Module underneath the Page module. Here is the folder structure ---> list/subdir.

Problem: I have the problem of List page module always loading when I navigate to localhost:8100/list/subdir instead of the Subdir page loading.

Outcome: I want the Subdir page to load when I navigate to localhost:8100/list/subdir; but instead it loads List page. I only want to load List page when URL is localhost:8100/list

app.routing.module.ts

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

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule'
  },
  {
    path: 'list',
    loadChildren: './list/list.module#ListPageModule'
  }
];

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

list.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { ListPage } from './list.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: ListPage,
        children: [
          {
            path: 'subdir',
            loadChildren: './subdir/subdir.module#SubdirPageModule',

          }
        ]
      }
    ])
  ],
  declarations: [ListPage]
})
export class ListPageModule {}

Did you mean that you see "List" component instead of the "Subdir" component when you visit ...../subdir? Or did you mean that you see the List module loading even when you visit ...../subdir? — Uğur Dinç
– Uğur Dinç, Commented Jun 4, 2019 at 19:12
@UğurDinç I see List component when I go to list/subdir, but that is wrong. I want to see the Subdir component when i visit list/subdir — user1142130
– user1142130, Commented Jun 4, 2019 at 19:21

Uğur Dinç · Accepted Answer · 2019-06-04 19:28:59Z

1

Any time you have a route inside a children array of another route, both the child and the parent component will be injected to the template.

This is because the parent would be using the < router-outlet > at (e.g) the global level (could be in app.component.html), and the child component would be using the < router-outlet > at its parents template. So, you would end up displaying both components at the same time.

If you are interested in not seeing the parent component in the view, you need to get rid of the parent-child relationship between the List and the Subdir.

To do that, you would have two options:

1) Move ListPage component to child route e.g list/list

or

2) Move Subdir component to an upper level.

answered Jun 4, 2019 at 19:28

Uğur Dinç

2,4652 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1142130 Over a year ago

But what if I want the List module to be a module where i hold multiple other sub-modules. Like parent children relationship. List is parent and Subdir is child. So that's why I want to keep it in the List module. Basically a URL structure like so parent/child1 , parent/child2 and so on...

Uğur Dinç Over a year ago

@user1142130 Then you need to follow the option #1. Move all the HTML inside the ListComponent to a ListItemComponent, and leave only the < router-outlet > inside it. This way, you will only display Subdir for ...../subdir (since there will be nothing but the < router-outlet > at the parent template), and you would only display the ListItem when the route is list/items

user1142130 Over a year ago

Ok, if I do that, then what if i have another parent module, for example home and that one has a subdir as well. so now i have list/subdir and home/subdir . will they conflict with each other? or is each subdir relative only to its parent, either list or home

Uğur Dinç Over a year ago

Won't conflict since they are two separate routes. Both routes will go and check what component / module they are mapped to and load accordingly.

user1142130 Over a year ago

Hmm , I don't want to create a ListItem module though. Let me explain with different example. I have a module called User. Inside of this module there is a UserRegistration module. So User is the parent, and RegisterUser is the child. So i want to have a URL like this example.com/user/registeruser . So, in my example above, the User would be the List. And Subdir would be RegisterUser

|

Collectives™ on Stack Overflow

Ionic lazy loading a module within children array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related