Angular lazy routing ignoring parent path

angular routing
angular route data
angular routing children
routing angular 8
router-outlet in angular
angular redirect to route
angular named router-outlet
default route angular

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!

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.

routing + lazy loading - angular is ignoring modules in the middle of path #15851 const routes: Routes = [ {path: '', component: AdminComponent, children: [ {​path: '' On my parent module i call this module by lazy loading:. Lazy loading basicslink. This section introduces the basic procedure for configuring a lazy-loaded route. For a step-by-step example, see the step-by-step setup section on this page. To lazy load Angular modules, use loadchildren (instead of component) in your AppRoutingModule routes configuration as follows.

Try loading the lazy loaded module as a child.

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

When one navigates to such an invalid route the angular router correctly routes to '/' but stops there, not further redirecting to '/default'. Expected  routing + lazy loading - angular is ignoring modules in the middle of path #15851

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'}
 ]}
];

The router attempts to match segments of a given URL against each route, using the Absolute if the URL begins with a slash (/), otherwise relative to the path URL. A LoadChildren object specifying lazy-loaded child routes. The following route uses the redirectTo property to ignore a segment of a given URL when  And it got me inspired to share my pattern of configuring routes in large scale Angular apps. Since the beginning, when I read the Angular Routing docs, and saw the “Routing Module” pattern

parent. The route's parent ActivatedRoute when this route is a child route. An event triggered before the Router lazy loads a route configuration. there's an extra junk parameter ( foo ) in the object that the HeroListComponent should ignore. Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

The notion of Route Snapshot and Router Snapshot; Auxiliary This is because the # fragment in the URL is ignored by the server useful for accessing for example route parameters of parent routes, like in the example above. Angular NgModule - Ahead Of Time Compilation (AOT) And Lazy Loading. To create nested routing, you need to create a routing submodule for the module you want to provide routing, you next need to define a parent route and its child routes and provide them to the router configuration via a forChild() method. Creating an Angular 9 Routing Module. Let's see this step by step.

This article explains how we can achieve that using Angular router. use it as a parent component in routing module of each specific feature. Smaller problem is that all lazy loaded modules and their base paths have to be  With the router/URL being an application’s “source of truth”, we need to be able to access parts of the URL for data purposes, such as grabbing a dynamic :id property from the URL, passing it into a service and bringing back the relevant data.

Comments
  • That worked as well, thanks a lot! I accepted Pankaj's answer, because it also solves my buggy lazy loading.