在使用angular 7实现延迟加载时，我遇到了错误。
每当在cmd上填充以下运行命令ng serve时都会出现错误。
20％构建模块91/93模块2个活动中... Web \ src \ assets \ bootstrap \ bootstrap.scss×｢wdm｣：错误：没有模块工厂可用于依赖项类型：ContextElementDependency 在addDependency 处（E：\ New文件夹\ node_modules \ webpack \ lib \ Compilation.js：671：12） 在erationOfArrayCallback（E：\ New文件夹\ node_modules \ webpack \ lib \ Compilation.js：186：3） 在addDependenciesBlock（E：\ New文件夹\ node_modules \ webpack \ lib \ Compilation.js：689：5） 在erationOfArrayCallback（E：\ New文件夹\ node_modules \ webpack \ lib \ Compilation.js：186：3） 在addDependenciesBlock（E：\ New文件夹\ node_modules \ webpack \ lib \ Compilation.js：692：5） 位于Compilation.processModuleDependencies（E：\ New文件夹\ node_modules \ webpack \ lib \ Compilation.js：700：4） 在afterBuild（E：\ New文件夹\ node_modules \ webpack \ lib \ Compilation.js：832：15） 在buildModule.err（E：\ New文件夹\ node_modules \ webpack \ lib \ Compilation.js：876：11） 回调时（E：\ New文件夹\ node_modules \ webpack \ lib \ Compilation.js：613：5） 在module.build.error（E：\ New文件夹\ node_modules \ webpack \ lib \ Compilation.js：653：12） 在resolveDependencies（E：\ New文件夹\ node_modules \ webpack \ lib \ ContextModule.js：282：4） 在ContextModule.result.resolveDependencies（E：\ New文件夹\ node_modules \ @ngtools \ webpack \ src \ angular_compiler_plugin.js：522：25） 在ContextModule.build（E：\ New文件夹\ node_modules \ webpack \ lib \ ContextModule.js：203：8） 在Compilation.buildModule（E：\ New文件夹\ node_modules \ webpack \ lib \ Compilation.js：618：10） 在factory.create（E：\ New文件夹\ node_modules \ webpack \ lib \ Compilation.js：859：14） 在hooks.afterResolve.callAsync（E：\ New文件夹\ node_modules \ webpack \ lib \ ContextModuleFactory.js：163：16） E：\ New文件夹\ node_modules \ neo-async \ async.js：14 抛出新错误（'Callback已经被调用。'）; ^
Error: Callback was already called.
at throwError (E:\New folder\node_modules\neo-async\async.js:14:11)
at E:\New folder\node_modules\neo-async\async.js:2805:7
at process._tickCallback (internal/process/next_tick.js:61:11)
const routes: Routes = [
{
path: '', redirectTo: 'login', pathMatch: 'full'
},
{ path: 'login', loadChildren: 'app/components/login/login.module#LoginModule'} <--- causing error
]
但是，使用下面的路由可以正常工作：-
const routes: Routes = [
{
path: '', redirectTo: 'login', pathMatch: 'full'
},
{ path: 'login', component:LoginComponent} <--- working fine
]
"dependencies": {
"@angular/animations": "^7.0.3",
"@angular/common": "^7.0.3",
"@angular/compiler": "^7.0.3",
"@angular/core": "^7.0.3",
"@angular/forms": "^7.0.3",
"@angular/http": "^7.0.3",
"@angular/platform-browser": "^7.0.3",
"@angular/platform-browser-dynamic": "^7.0.3",
"@angular/platform-server": "^7.0.3",
"@angular/pwa": "^0.10.6",
"@angular/router": "^7.0.3",
"@angular/service-worker": "^7.0.3",
"@ng-bootstrap/ng-bootstrap": "^4.0.0",
"@types/lodash": "^4.14.116",
"core-js": "^2.5.7",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"ng-connection-service": "^1.0.4",
"ngx-perfect-scrollbar": "^6.3.1",
"ngx-toastr": "^9.1.0",
"ngx-ui-switch": "^1.6.0",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3",
"web-animations-js": "2.3.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.10.5",
"@angular/cdk": "^7.0.3",
"@angular/cli": "^7.0.5",
"@angular/compiler-cli": "^7.0.3",
"@angular/language-service": "^7.0.3",
"@angular/material": "^7.0.3",
"@types/jasmine": "^2.8.11",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^10.12.6",
"codelyzer": "^4.5.0",
"jasmine-core": "^3.3.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^3.1.1",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter": "^1.4.3",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.4.0",
"node-sass": "^4.9.3",
"protractor": "^5.4.1",
"rxjs-tslint": "^0.1.5",
"ts-node": "~4.1.0",
"tslint": "^5.11.0",
"typescript": "^3.1.6",
"webpack": "^4.20.2"
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
NoopAnimationsModule,
AppRoutingModule
],
providers: [
HttpService,
AuthGuard,
WebsocketService
],
entryComponents: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login.component';
import { loginRouting } from './login.routing';
@NgModule({
imports: [
CommonModule,
loginRouting
],
declarations: [LoginComponent]
})
export class LoginModule { }
import { NgModule, ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';
const routes: Routes = [
{ path: '', component: LoginComponent }
];
export const loginRouting = RouterModule.forChild(routes);
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"types": [
"node"
],
"lib": [
"es2017",
"dom"
],
"baseUrl": "./src",
"paths": {
},
"module": "es2015"
}
}
Angular CLI: 7.1.1
Node: 10.13.0
OS: win32 x64
Angular: 7.1.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, http, language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.10.7
@angular-devkit/build-angular 0.10.7
@angular-devkit/build-optimizer 0.10.7
@angular-devkit/build-webpack 0.10.7
@angular-devkit/core 7.0.7
@angular-devkit/schematics 7.0.7
@angular/pwa 0.10.7
@ngtools/webpack 7.0.7
@schematics/angular 7.0.7
@schematics/update 0.11.1
rxjs 6.3.3
typescript 3.1.6
webpack 4.27.0
答案 0 :(得分：0)
尝试以这种方式设置路由文件。
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginModule'},
{ path: 'login', loadChildren: './login/login.module#LoginModule' },
];
并确保在login.module.ts中设置了它的组成部分
declarations: [LoginComponent]
更新
当您从6更新到7时，可能会发生此问题。 为此，请阅读并遵循此命令和步骤。
答案 1 :(得分：0)
如果您的“ components”文件夹位于app.routing.ts文件的同一级别，则您的路径错误，然后尝试执行此操作。
const routes: Routes = [
{path: '', redirectTo: 'login', pathMatch: 'full'},
{ path: 'login', loadChildren: './components/login/login.module#LoginModule'}
]
答案 2 :(得分：0)
package.json中的另一个webpack问题
更多信息-https://github.com/angular/universal-starter/issues/583