Question

我正在尝试实现延迟加载。我很确定我把正确的路径放到VideoModule上，但是我仍然在编译时遇到错误。

这是我的AppModule，我在其中定义了我想要懒惰加载的路由和模块。

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

import {AppComponent} from './app.component';
import {MenuComponent} from './menu/menu.component';
import {RouterModule} from '@angular/router';
import {HomeComponent} from './home/home.component';
import {VideoModule} from './video/video.module';

@NgModule({
    declarations: [
        AppComponent,
        MenuComponent,
        HomeComponent,
    ],
    imports: [
        BrowserModule,
        HttpModule,
        VideoModule,
        RouterModule.forRoot([
            {path: '', component: HomeComponent},
            {path: 'video', loadChildren: 'app/video/video.module#VideoModule'}
        ])
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

和VideoModule

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {VideosComponent} from './videos/videos.component';
import {VideoPlayComponent} from './video-play/video-play.component';
import {NamePipe} from './name.pipe';
import {VideoFilterPipe} from './video-filter.pipe';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {VideoPlayGuard} from './video-play.guard';
import {VideoService} from './video.service';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild([
            {path: 'videos', component: VideosComponent}
        ])
    ],
    declarations: [
        VideosComponent,
        VideoPlayComponent,
        NamePipe,
        VideoFilterPipe
    ],
    providers: [
        VideoPlayGuard,
        VideoService
    ],
    exports: [
    ]
})
export class VideoModule {
}

我得到的错误：

40% building modules 1/2 modules 1 active ...Dev\pfilter-web\src\app\app.module.tsError: No module factory available for dependency type: ContextElementDependency
    at Compilation.addModuleDependencies (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:206:21)
    at Compilation.processModuleDependencies (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:195:8)
    at _this.buildModule.err (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:335:13)
    at building.forEach.cb (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:140:27)
    at Array.forEach (native)
    at callback (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:140:13)
    at module.build (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:167:11)
    at ContextModule.<anonymous> (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:118:3)
    at ContextModule.result.resolveDependencies (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@ngtools\webpack\src\plugin.js:229:25)
    at ContextModule.build (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:99:7)
    at Compilation.buildModule (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:142:10)
    at factoryCallback (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:324:11)
    at C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\ContextModuleFactory.js:96:12
    at C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\tapable\lib\Tapable.js:204:11
    at done.then (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@ngtools\webpack\src\plugin.js:231:28)
    at process._tickCallback (internal/process/next_tick.js:109:7)
 70% building modules 2/2 modules 0 active(node:9200) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: callback(): The callback was already called.
webpack: wait until bundle finished: /
webpack: wait until bundle finished: /

Answer 1

如果VideoModule是延迟加载的，它应该不在AppModule中导入：

imports: [
    BrowserModule,
    HttpModule,
    **VideoModule**,
    RouterModule.forRoot([
        {path: '', component: HomeComponent},
        {path: 'video', loadChildren: 'app/video/video.module#VideoModule'}
    ])
],

从上面删除它。

也不应该导入它。删除这一行：

import {VideoModule} from './video/video.module';

同时删除空提供者数组：

providers: [
],

我还发现了此问题以及解决方法的几种方法：https://github.com/angular/angular-cli/issues/4246

Angular 2延迟加载编译错误

1 个答案: