Question

我正在尝试在我的angular4项目中创建一个延迟加载，根据文档按照所有步骤进行操作，没有任何内容。

以下是我的代码：

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

和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

我已经阅读了文档，我已经在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中声明它。导入并声明StudentComponent，看看是否能解决问题。

修改

wdanda对这个问题是正确的。尝试首先从您的应用程序路径中删除StudentComponent，看看会发生什么。

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

2 个答案:

修改