Ytukyg

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() {}

}

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

1. You've used forChild instead of forRoot in your AppRoutingModule.


2. 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.


3. 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.

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