angular - Angular 6错误: No module factory available for dependency type: ContextElementDependency

Question

问题:
当我进行构建时，出现此错误:

No module factory available for dependency type: ContextElementDependency
Error: No module factory available for dependency type: ContextElementDependency
    at addDependency (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/Compilation.js:696:12)
    at iterationOfArrayCallback (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/Compilation.js:194:3)
    at addDependenciesBlock (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/Compilation.js:714:5)
    at iterationOfArrayCallback (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/Compilation.js:194:3)
    at addDependenciesBlock (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/Compilation.js:717:5)
    at Compilation.processModuleDependencies (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/Compilation.js:725:4)
    at afterBuild (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/Compilation.js:857:15)
    at buildModule.err (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/Compilation.js:901:11)
    at callback (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/Compilation.js:630:5)
    at module.build.error (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/Compilation.js:678:12)
    at resolveDependencies (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/ContextModule.js:282:4)
    at ContextModule.result.resolveDependencies (/Users/kazuar/Projects/EducationFrontEnd/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:504:25)
    at ContextModule.build (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/ContextModule.js:203:8)
    at Compilation.buildModule (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/Compilation.js:635:10)
    at factory.create (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/Compilation.js:884:14)
    at hooks.afterResolve.callAsync (/Users/kazuar/Projects/EducationFrontEnd/node_modules/webpack/lib/ContextModuleFactory.js:163:16)

我首先要说的是，这个问题仅在我将路由从急切加载更改为延迟加载时才开始出现。
当我尝试返回紧急加载时，我没有遇到这个问题，因此可能与之相关，但是我不知道是什么原因引起的

这是我的路由表渴望加载的样子:

// Routing array - using eager loading
const appRoutes: Routes = [
  { path: 'login/:id', canActivate: [AuthGuard], children: [] },
  { path: '', canActivateChild: [AuthGuard], children: [
    { path: '', redirectTo: '/courses', pathMatch: 'full' },
    { path: 'courses', component: CourseListComponent,  pathMatch: 'full'},
    { path: 'courses/:courseId', component: CourseDetailComponent, pathMatch: 'full' },
    { path: 'courses/:courseId/unit/:unitId', component: CoursePlayComponent,
      children: [
        { path: '', component: CourseListComponent },
        { path: 'lesson/:lessonId', component: CourseLessonComponent, data:{ type: 'lesson'} },
        { path: 'quiz/:quizId', component: CourseQuizComponent, data: {type: 'quiz'} }
      ]}
    ]},
  { path: 'welcome', component: LandingPageComponent, pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent, pathMatch: 'full' }];

这是延迟加载:

// app-routing.module

const routes:Routes = [
  { path: 'welcome', component: LandingPageComponent, pathMatch: 'full' },
  { path: 'login/:id', canActivate: [AuthGuard], children: [] },
  { path: '', canActivateChild: [AuthGuard], children: [
    { path: '', redirectTo: '/courses', pathMatch: 'full' },
    { path: 'courses', loadChildren: './courses/course.module#CourseModule', canLoad: [AuthGuard] }
  ]},
  { path: '**', component: PageNotFoundComponent, pathMatch: 'full' }
]


// course-routing.module

const routes:Routes = [
  {
    path: '',
    component: CourseListComponent,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children:[
      { path: '', redirectTo: '/courses', pathMatch: 'full' },
      { path: ':courseId', component: CourseDetailComponent, pathMatch: 'full' },
      { path: ':courseId/unit/:unitId', component: CoursePlayComponent,
        children: [
          { path: '', component: CourseListComponent },
          { path: 'lesson/:lessonId', component: CourseLessonComponent, data:{ type: 'lesson'} },
          { path: 'quiz/:quizId', component: CourseQuizComponent, data: {type: 'quiz'} }
      ]}
  ]}
]

auth.guard:

import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { Router, CanActivate, CanActivateChild, CanLoad, ActivatedRouteSnapshot, RouterStateSnapshot, NavigationExtras, Route } from '@angular/router';
import { AuthUserService } from './users/auth-user.service';
import { LocalStorage } from '@ngx-pwa/local-storage';

@Injectable()
export class AuthGuard implements CanActivate , CanActivateChild {

    constructor(private authUserService: AuthUserService, private router: Router) {   }

    canActivate(route: ActivatedRouteSnapshot, state:
       RouterStateSnapshot): boolean |
       Observable<boolean> | Promise<boolean> {
         // save the id from route snapshot
         const id = +route.params.id;
         const course_id = +route.params.courseId;

         // if you try to logging with id
         if (id) {
           this.router.navigate(["/courses"]);
           return this.authUserService.login(id);
         }
         // if you're already logged in and navigate between pages
         else if (this.authUserService.isLoggedIn()){
           if (course_id){
             // check if someone try to access a locked course
             if (this.authUserService.isCourseNotPartOfTheSubscription(course_id)){
               this.router.navigate(["/welcome"]);
               return false;
             }
             else
               return true;
           }
           else
             return true;
         }
         else {
           this.router.navigate(["/welcome"]);
           return false;
         }
        }

      canActivateChild(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean |
      Observable<boolean> | Promise<boolean> {
         return this.canActivate(route, state);
       }

       canLoad(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean |
       Observable<boolean> | Promise<boolean> {
         return this.canActivate(route, state);
       }
}

我在正确的位置添加了导入，并遵循了3个不同的教程。
我真的不知道出什么问题了。
谢谢你们

Answer 1

我解决了这个问题，我的webpack没有更新，也不支持延迟加载，因此我删除了它并安装了最新的webpack，它可以正常工作