使用 Angular 4 延迟加载不起作用

Question

我正在尝试在我的 angular4 项目中创建一个延迟加载，请按照文档的所有步骤进行操作，什么都没有。

这是我下面的代码：

学生模块：

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

学生路由模块：

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

应用路由模块：

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

和应用模块：

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

控制台错误：

控制台错误

我已经

阅读了文档，我已经在 github 中看到了几个示例，并且都做了我正在做的事情。帮助！！！

Answer 1

你不应该从主路由器文件中引用 StudentComponent（这就是你"急切加载"它的方式，所以要延迟加载，你使用 loadChildren 而不是组件。

因此，而不是：

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

这样做：

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

（显然不要在文件顶部导入它）

Answer 2

我认为您的控制台错误准确地显示了问题。由于在延迟加载之前在应用程序路由中使用了 StudentComponent，因此您需要在 app.module 中声明它。导入并声明学生组件，看看是否可以解决问题。

编辑

WDANDA在这个问题上是对的。首先尝试从应用路由中删除学生组件，看看会发生什么。