Angular 6 Error: No module factory available for dependency type: ContextElementDependency
Angular 6 Error: No module factory available for dependency type: ContextElementDependency
问题:
当我进行 ng 构建时,出现此错误:
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)
首先我想说这个问题是在我把路由从eager loading改成lazy loading的时候才出现的。
当我尝试返回到预先加载时,我没有遇到这个问题,所以它可能与此有关,但我不知道是什么原因造成的
这就是我的路由 table 在预先加载时的样子:
// 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 个不同的教程。
我真的不知道出了什么问题。
谢谢大家
我解决了,我的 webpack 没有更新并且不支持延迟加载所以我删除了它并安装了最新的并且它有效
问题: 当我进行 ng 构建时,出现此错误:
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)
首先我想说这个问题是在我把路由从eager loading改成lazy loading的时候才出现的。 当我尝试返回到预先加载时,我没有遇到这个问题,所以它可能与此有关,但我不知道是什么原因造成的
这就是我的路由 table 在预先加载时的样子:
// 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 个不同的教程。 我真的不知道出了什么问题。 谢谢大家
我解决了,我的 webpack 没有更新并且不支持延迟加载所以我删除了它并安装了最新的并且它有效