[英]Angular 6 Error: No module factory available for dependency type: ContextElementDependency
The problem: When I do ng build I get this error: 问题:当我进行构建时,我收到此错误:
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)
I'd like to say first that this problem started only when I changed the routing to lazy loading from eager loading. 我首先要说的是,只有当我将路由从急切加载更改为延迟加载时才会启动此问题。 When I tried to go back to eager loading, I didn't have this problem so it's probably connected to that, but I don't know what caused it
当我试图回到急切的装载时,我没有遇到这个问题,所以它可能与之相关,但我不知道是什么导致它
This is how my routing table looked like with eager loading: 这是我的路由表在预测加载时的样子:
// 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' }];
This is with lazy loading: 这是延迟加载:
// 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: 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); } }
I added import on the right places and followed 3 different tutorials. 我在正确的位置添加了导入,并遵循3个不同的教程。 I really don't know what's the problem.
我真的不知道是什么问题。 Thank you all
谢谢你们
我解决了它,我的webpack没有更新,并且不支持延迟加载所以我删除了它并安装了最新版本并且它工作正常
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.