1

I'm trying to create a lazy load in my angular4 project, follow all the steps according to the documentation and nothing.

Here is my code below:

StudentModule:

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

import { StudentComponent } from './student.component';
import { StudentNotFoundComponent } from './student-not-found/student-not-found.component';
import { StudentFormComponent } from './student-form/student-form.component';
import { StudentDetailComponent } from './student-detail/student-detail.component';
import { StudentService } from './student.service';

@NgModule({
   imports: [
      CommonModule
   ],
   declarations: [
      StudentComponent,
      StudentFormComponent,
      StudentDetailComponent,
      StudentNotFoundComponent
   ],
   providers: [
      StudentService
   ]
})
export class StudentModule { }

StudentRoutingModule:

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

import { StudentNotFoundComponent } from './student-not-found/student-not-found.component';
import { StudentFormComponent } from 'app/student/student-form/student-form.component';
import { StudentDetailComponent } from './student-detail/student-detail.component';
import { StudentComponent } from './student.component';

const student : Routes = [
      {path : '', component : StudentComponent, children: [
      {path : 'new', component : StudentFormComponent},
      {path : ':id', component : StudentDetailComponent},
      {path : ':id/edit', component : StudentFormComponent},
      {path : 'student-not-found', component : StudentNotFoundComponent}
   ]}
];

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

AppRoutingModule:

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


import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { AuthGuard } from './guard/auth.guard';

const APP_ROUTE: Routes = [
    {
        path: 'student',
        component: StudentComponent,
        loadChildren: 'app/student/student.module#StudentModule',
        canLoad: [AuthGuard]
    },
    { path: 'login', component: LoginComponent},
    { path: 'home', component: HomeComponent},
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent}
];

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

And AppModule:

import { BrowserModule }          from '@angular/platform-browser';  
import { NgModule }               from '@angular/core';
import { FormsModule }            from '@angular/forms';
import { HttpModule }             from '@angular/http';
import { ModuleWithProviders }    from '@angular/core';

import { MaterializeModule }      from 'angular2-materialize';

import { AppComponent }           from './app.component';
import { LoggedConfig }           from './config/logged.config';
import { TokenConfig }            from './config/token.config'
import { AuthGuard }              from './guard/auth.guard';
import { AuthenticationService }  from './authentication/authentication.service';
import { LoginComponent }         from './login/login.component';
import { AdministratorComponent } from './administrator/administrator.component';
import { HomeComponent }          from './home/home.component';
import { NavbarComponent }        from './navbar/navbar.component';
import { PageNotFoundComponent }  from './page-not-found/page-not-found.component';
import { AppRoutingModule }       from 'app/app.routing.module';

@NgModule({
    declarations: [
        AppComponent,
        LoginComponent,
        AdministratorComponent,
        HomeComponent,
        NavbarComponent,
        PageNotFoundComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        MaterializeModule,
        AppRoutingModule
    ],
    providers: [
        AuthGuard,
        AuthenticationService,
        LoggedConfig,
        TokenConfig
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Console error:

Console error

I have read the documentation, I have already seen several examples in github and all do what I am doing. Help!!!

2
  • remove component: StudentComponent from path: 'student', seems unnecessary as you are already adding it in default child path. Also since the student module is loaded lazily component will not be avilable to be used in AppModule unless you import them. Commented Oct 24, 2017 at 20:27
  • it worked!!!!!! Commented Oct 24, 2017 at 20:39

2 Answers 2

2

You shouldn't reference StudentComponent from the main router file (that is how you 'eagerly load' it, so to lazy load you use loadChildren instead of component.

So, instead of:

const APP_ROUTE: Routes = [
{
    path: 'student',
    component: StudentComponent,
    loadChildren: 'app/student/student.module#StudentModule',
    canLoad: [AuthGuard]
},
{ path: 'login', component: LoginComponent},
{ path: 'home', component: HomeComponent},
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent}
];

Do this:

const APP_ROUTE: Routes = [
{
    path: 'student',
    loadChildren: 'app/student/student.module#StudentModule',
    canLoad: [AuthGuard]
},
{ path: 'login', component: LoginComponent},
{ path: 'home', component: HomeComponent},
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent}
];

(And obviously don't import it at the top of the file)

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

Comments

0

I think your console error shows exactly the issue. Since you use StudentComponent in your app routing before you lazy load, you then need to declare it in your app.module. Import and declare StudentComponent and see if that solves the issue.

Edit

wdanda is right about the issue. Try remove StudentComponent from your app route first and see what happens.

1 Comment

Ty!:::::::::::)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.