Angular Lazy loading not Navigating

Question

I'm want to implement Angular lazing loading in my app.

I read through so many books and it seems this the normal way to do it, maybe I missed something important and it's been two days.

https://github.com/kondasMajid/angula-lazy-loading

App-routing-Module.ts

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

const routes: Routes = [
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  },

  {
    path: 'home',
    loadChildren: './home/home.module#HomeModule'
  },
  {
    path: 'view',
    loadChildren: 'app/view/view.module#ViewModule'
  }
];

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

app.component.html

<button routerLink="/view">view</button>

<router-outlet></router-outlet>

view.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ViewRoutingModule } from './view-routing.module';
import { RouterModule, Routes } from '@angular/router';
import { ViewComponent } from './view.component';

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

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    ViewRoutingModule,
    RouterModule.forChild(routes)
  ]
})
export class ViewModule { }

view.component.ts

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

@Component({
  selector: 'view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.css']
}) 
export class ViewComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

view.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'view', templateUrl: './view.component.html', styleUrls: ['./view.component.css'] }) export class ViewComponent implements OnInit { constructor() { } ngOnInit() { } } — Kondas Lamar Jnr
– Kondas Lamar Jnr, Commented Nov 25, 2018 at 9:59

SiddAjmera · Accepted Answer · 2018-11-25 10:39:37Z

1

There seems to be a lot of problems with your current implementation:

You've used forChild instead of forRoot in your AppRoutingModule.
In your ViewModule you're doing I don't know what. Ideally, your Routes should be defined in a ViewRoutingModule and then the RouterModule should be exported from there and imported in your ViewModule.
The empty route('') in your AppRoutingModule's Routes config might end up being an infinite loop. So you might want to redirect to somewhere else in that case.

Fixing these two issues should make it work:

AppRoutingModule:

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

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },

  {
    path: 'home',
    loadChildren: './home/home.module#HomeModule'
  },
  {
    path: 'view',
    loadChildren: 'app/view/view.module#ViewModule'
  }
];

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

ViewRoutingModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { RouterModule, Routes } from '@angular/router';
import { ViewComponent } from './view/view.component';

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

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

ViewModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ViewRoutingModule } from './view-routing.module';
import { RouterModule, Routes } from '@angular/router';
import { ViewComponent } from './view/view.component';

@NgModule({
  declarations: [ViewComponent],
  imports: [
    CommonModule,
    ViewRoutingModule
  ]
})
export class ViewModule { }

Here's a Sample StackBlitz for your ref.

edited Nov 25, 2018 at 10:39

answered Nov 25, 2018 at 10:00

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

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

10 Comments

Kondas Lamar Jnr Over a year ago

Thanks for your reply. i did what you just said, yet i'm not able to navigate to the page.

SiddAjmera Over a year ago

@KondasLamarJnr, I've updated my answer. There was another issue with your ViewModule. Hopefully, my updated answer should fix your issues.

Kondas Lamar Jnr Over a year ago

thanks alot, but definetly not going well enough for my so i have created a repo on Github , kidly check out for me.. github.com/kondasMajid/angula-lazy-loading

SiddAjmera Over a year ago

Your GitHub repo doesn't have the view Folder and the home folder. How do you expect it to work?

SiddAjmera Over a year ago

Please consider using this StackBlitz link to clearly understand: stackblitz.com/edit/angular-xcrhf4

|

Rahul · Accepted Answer · 2018-11-25 11:57:12Z

1

Your app.routing.ts should read like this that will be the first change

imports[RouterModule.forRoot(routes)],

Second change is that you need to redirectTo correct path when your route is empty

Try something like this

{
    path: '',
    redirectTo: '/view',
    pathMatch: 'full'
}

Hope these changes will work - happy coding :)

Update:

I think you missed a major missing here - I don't see your AppRoutingModule imported inside your AppModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule //This will do the trick
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Try the above changes and import your routing inside your module - Hope it works

edited Nov 25, 2018 at 11:57

answered Nov 25, 2018 at 10:22

Rahul

2,1382 gold badges14 silver badges30 bronze badges

1 Comment

Rahul Over a year ago

I have checked your repo :) i have updated my answer try it and let me know :)

Collectives™ on Stack Overflow

Angular Lazy loading not Navigating

2 Answers 2

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related