CODEWITHSUNDEEP
angulartypescript
stackie
stackie

Reputation: 23

Angular lazy routing ignoring parent path

I am using Angular 6.1 and I tried to set up an app module and a feature module (called entities module) using lazy routing. I want to create a route /entities/list, linking to a component inside my entities module. But I can't get this route to work. Instead, the component will be displayed when I navigate to /list. Why is my routing ignoring the parent "/entities" path?

app.module.ts:

import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {BrowserModule} from '@angular/platform-browser';
import {EntitiesModule} from './entities/entities.module';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [AppRoutingModule, BrowserModule, EntitiesModule],
    providers: []
})

export class AppModule {}

app-routing.module.ts:

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

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

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

export class AppRoutingModule {}

app.component.ts:

import {Component} from '@angular/core';

@Component({
    selector: 'app-root',
    template: 'app <router-outlet></router-outlet>'
})

export class AppComponent {}

entities/entities.module.ts:

import {NgModule} from '@angular/core';
import {EntitiesRoutingModule} from './entities-routing.module';
import {EntitiesComponent} from './entities.component';

@NgModule({
    declarations: [EntitiesComponent],
    imports: [EntitiesRoutingModule]
})

export class EntitiesModule {}

entities/entities-routing.module.ts:

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {EntitiesComponent} from './entities.component';

const routes: Routes = [
    {path: 'list', component: EntitiesComponent}
];

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

export class EntitiesRoutingModule {}

entities/entities.component.ts:

import {Component} from '@angular/core';

@Component({
    selector: 'app-entities',
    template: 'entities'
})

export class EntitiesComponent {}

I also tried defining the route in the entities module using the following, but the component will still be shown navigating to /list, not to /entities/list.

const routes: Routes = [
    {
        path: '', children: [
            {path: 'list', component: EntitiesComponent}
        ]
    }
];

What am I doing wrong? Any help is appreciated!

Upvotes: 2

Views: 1338

Answers (3)

Pankaj Shukla
Pankaj Shukla

Reputation: 2672

You are trying to do lazy loading. However, you are doing eager loading.

In app.module.ts the line:

imports: [AppRoutingModule, BrowserModule, EntitiesModule],

is loading the Entities module. Remove it from there for lazy loading and it should work.

Upvotes: 4

Suryan
Suryan

Reputation: 659

As you are lazy loading the module but does not initializing the Entities component. Your /entities/list should be the child of entities component

Your entities/entities-routing.module.ts should be like

const route: Routes = [
  { path: '', component: EntitiesComponent, children: [
  { path: 'list', component: EntitiesListComponent }, // here should be your /entities/list path which i think you haven't made any
  { path: 'xyz', component: XYZComponent }, // entities/xyz and so on...
  { path: '', redirectTo: 'list', pathMatch: 'full'}
 ]}
];

Upvotes: 0

Muhammad Kamran
Muhammad Kamran

Reputation: 1027

Try loading the lazy loaded module as a child.

  {
    path: 'entities',
    children: [{
      path: '',
      loadChildren: './entities/entities.module#EntitiesModule'
    }]
  }

Upvotes: 1

Related Questions