此问题已在StackOverflow中提出。但是,给定的解决方案不起作用。在执行Angular将来的模块延迟加载时,出现以下错误。我也尝试过Git集线器解决方案(删除节点模块,然后重新安装),但是它不起作用。
Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
18% building modules 74/76 modules 2 active ...3-gui\src\sass\bootstrap\bootstrap.scss× 「wdm」: Error: No module factory available for dependency type: ContextElementDependency
at addDependency (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\Compilation.js:696:12)
at iterationOfArrayCallback (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\Compilation.js:194:3)
at addDependenciesBlock (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\Compilation.js:714:5)
at iterationOfArrayCallback (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\Compilation.js:194:3)
at addDependenciesBlock (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\Compilation.js:717:5)
at Compilation.processModuleDependencies (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\Compilation.js:725:4)
at afterBuild (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\Compilation.js:857:15)
at buildModule.err (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\Compilation.js:901:11)
at callback (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\Compilation.js:630:5)
at module.build.error (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\Compilation.js:678:12)
at resolveDependencies (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\ContextModule.js:282:4)
at ContextModule.result.resolveDependencies (C:\xampp\htdocs\hms3-gui\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:522:25)
at ContextModule.build (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\ContextModule.js:203:8)
at Compilation.buildModule (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\Compilation.js:635:10)
at factory.create (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\Compilation.js:884:14)
at hooks.afterResolve.callAsync (C:\xampp\htdocs\hms3-gui\node_modules\webpack\lib\ContextModuleFactory.js:163:16)
C:\xampp\htdocs\hms3-gui\node_modules\neo-async\async.js:14
throw new Error('Callback was already called.');
^
Error: Callback was already called.
at throwError (C:\xampp\htdocs\hms3-gui\node_modules\neo-async\async.js:14:11)
at C:\xampp\htdocs\hms3-gui\node_modules\neo-async\async.js:2813:7
at process._tickCallback (internal/process/next_tick.js:61:11)
这是我的App模块文件
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
// import { LoginComponent } from './modules/authentication/login/login.component';
// import { RegistrationComponent } from './modules/authentication/registration/registration.component';
// import { ForgotPasswordComponent } from './modules/authentication/forgot-password/forgot-password.component';
import { HeaderComponent } from './modules/utilities/header/header.component';
import { UtilsService } from './modules/utilities/utils.service';
import { utilitiesModule } from './modules/utilities/utilities.module';
// import { DashboardModule } from './modules/dashboard/dashboard.module';
// import { OrdersModule } from './modules/orders/orders.module';
// import { PatientsModule } from './modules/patients/patients.module';
// import { SetupModule } from './modules/setup/setup.module';
import { AuthService } from './services/auth.service';
import { ApiCallsService } from './services/apicalls.service';
// import { FeedbackModule } from './modules/feedback/components/feedback.module';
// import { ReportsModule } from './modules/reports/reports.module';
import { SortService } from './services/sort.service';
// import { LoginRouteGuard } from './modules/authentication/login-route-guard/can-activate';
import { communicationService } from './services/communication.service';
import { localStorage } from './services/local-storage.service';
// import { ArchwizardModule } from 'ng2-archwizard';
import { ResourceModule } from './modules/resource/resource.module';
import { CommonService } from './services/common.service';
import { ListServiceService } from './services/list-service.service';
import { CreateOrderService } from './modules/orders/components/create-order.service';
import { HttpModule } from '@angular/http';
import { dateService } from './services/date.service';
import { locationService } from './services/location.service';
import { MyDatePickerModule } from 'mydatepicker';
import { PersistentService } from './services/persistent.service';
import { UrlService } from './services/url.service';
import { constants } from './modules/utilities/constants';
import { SettingsService } from './services/settings.service';
import { UserAccessService } from './services/user-access.service';
import { CognitoService } from './services/cognito.service';
import { DataService } from './services/data.service';
import { AuthenticationModule } from './modules/authentication/authentication.module';
import { LoginRouteGuard } from './modules/authentication/components/login-route-guard/can-activate';
@NgModule({
declarations: [
AppComponent,
HeaderComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ResourceModule,
ReactiveFormsModule,
HttpModule,
MyDatePickerModule,
AuthenticationModule,
utilitiesModule,
RouterModule.forRoot([
// {
// path: 'dashboard',
// loadChildren: 'app/modules/dashboard/dashboard.module#DashboardModule'
// },
{
path: 'order',
loadChildren: 'app/modules/orders/orders.module#OrdersModule'
},
// {
// path: 'patient',
// loadChildren: 'app/modules/patients/patients.module#PatientsModule'
// },
// {
// path: 'feedback',
// loadChildren: 'app/modules/feedback/feedback.module#FeedbackModule'
// },
// {
// path: 'resources',
// loadChildren: 'app/modules/resource/resource.module#ResourceModule'
// },
// {
// path: 'reports',
// loadChildren: 'app/modules/reports/reports.module#ReportsModule'
// },
// {
// path: 'nurse',
// loadChildren: 'app/modules/nurses/nurses.module#NursesModule'
// },
// {
// path: 'facilities',
// loadChildren: 'app/modules/facilities/facilities.module#FacilitiesModule'
// },
// {
// path: 'users',
// loadChildren: 'app/modules/users/users.module#UsersModule'
// },
// {
// path: 'orderapprovals',
// loadChildren: 'app/modules/order-approvals/order-approvals.module#OrderApprovalsModule'
// },
// {
// path: 'branchapprovals',
// loadChildren: 'app/modules/branch-approvals/branch-approvals.module#BranchApprovalsModule'
// },
// {
// path: 'after-hours',
// loadChildren: 'app/modules/on-call-solution/on-call-solution.module#OnCallSolutionModule'
// },
]),
],
providers: [
AuthService,
ApiCallsService,
LoginRouteGuard,
communicationService,
localStorage,
SortService,
CommonService,
CreateOrderService,
dateService,
ListServiceService,
locationService,
PersistentService,
UrlService,
constants,
SettingsService,
UserAccessService,
CognitoService,
UtilsService,
DataService,
],
bootstrap: [AppComponent]
})
export class AppModule { }
这是order.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { OrderComponent } from './components/order/order.component';
import { CreateOrderWhoComponent } from './components/create-order-who/create-order-who.component';
import { CreateOrderWhatComponent } from './components/create-order-what/create-order-what.component';
import { CreateOrderWhereComponent } from './components/create-order-where/create-order-where.component';
import { CreateOrderWhenComponent } from './components/create-order-when/create-order-when.component';
import { CreateOrderSelectComponent } from './components/create-order-select/create-order-select.component';
import { CreateOrderReviewComponent } from './components/create-order-review/create-order-review.component';
import { LoginRouteGuard } from '../authentication/components/login-route-guard/can-activate';
import { CreateOrderComponent } from './components/create-order/create-order.component';
import { ArchwizardModule } from 'ng2-archwizard';
import { utilitiesModule } from '../utilities/utilities.module';
import { CreateOrderParentComponent } from './components/create-order-parent.component';
import { loStrPipe } from '../../pipes/lodash.pipe';
import { OrderEquipmentService } from './components/create-order-select/order-equipment.service';
import { OrderCatalogHeaderComponent } from './components/inline-comps/order-catalog-header/order-catalog-header.component';
import { OrderCatalogBodyComponent } from './components/inline-comps/order-catalog-body/order-catalog-body.component';
import { AddressesMapComponent } from './components/inline-comps/addresses-map/addresses-map.component';
import { OrderEditReasonComponent } from './components/create-order-when/order-edit-reason/order-edit-reason.component';
import { allEquipmentData } from './components/create-order-select/create-equipment.model';
import { PackageItems } from './components/create-order-select/package.data';
import { orderModel } from '../orders/components/order/order.model';
import { OrderInfoComponent } from './order-info/order-info.component';
@NgModule({
declarations: [
OrderComponent,
CreateOrderWhoComponent,
CreateOrderWhatComponent,
CreateOrderWhereComponent,
CreateOrderWhenComponent,
CreateOrderSelectComponent,
CreateOrderReviewComponent,
CreateOrderComponent,
CreateOrderParentComponent,
loStrPipe,
OrderCatalogHeaderComponent,
OrderCatalogBodyComponent,
AddressesMapComponent,
OrderEditReasonComponent,
OrderInfoComponent
],
imports: [
CommonModule,
ArchwizardModule,
utilitiesModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forChild([
{ path: 'order', component: OrderComponent, canActivate: [LoginRouteGuard] },
{
path: 'order/:orderId/edit',
component: CreateOrderComponent,
canActivate: [LoginRouteGuard]
},
{
path: 'order/create/form',
component: CreateOrderComponent,
canActivate: [LoginRouteGuard]
}
])
],
providers: [loStrPipe, OrderEquipmentService, allEquipmentData, PackageItems, orderModel]
})
export class OrdersModule {}
Angular JSON
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"hms3-gui": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/sass/bootstrap/bootstrap.scss",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"src/assets/libs/bootstrap/bootstrap.js",
"src/assets/libs/cmGauge.js",
"src/assets/libs/jquery.mask.js",
"src/assets/libs/jquery.slimscroll.min.js",
"src/assets/libs/slick.js",
"src/assets/libs/anychart/anychart-bundle.min.js"
]
},
"configurations": {
"local": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.local.ts"
}
]
},
"stag": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.stag.ts"
}
]
},
"prod": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "hms3-gui:build"
},
"configurations": {
"local": {
"browserTarget": "hms3-gui:build:local"
},
"stag": {
"browserTarget": "hms3-gui:build:stag"
},
"prod": {
"browserTarget": "hms3-gui:build:prod"
},
"production": {
"browserTarget": "hms3-gui:build:production"
}
},
// "extractCss": true,
// "stylePreprocessorOptions": {
// "includePaths": [
// "sass"
// ]
// }
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "hms3-gui:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"src/assets/libs/bootstrap/bootstrap.js",
"src/assets/libs/cmGauge.js",
"src/assets/libs/jquery.mask.js",
"src/assets/libs/jquery.slimscroll.min.js",
"src/assets/libs/slick.js",
"src/assets/libs/anychart/anychart-bundle.min.js"
],
"styles": [
"src/sass/bootstrap/bootstrap.scss",
"src/styles.scss"
],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"hms3-gui-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "hms3-gui:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "hms3-gui",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
这是package.json
{
"name": "hms3-gui",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --port=4200",
"build": "webpack",
"build-stag": "ng build --configuration=stag",
"build-prod": "ng build --configuration=prod",
"test": "karma start ./karma.conf.js",
"lint": "ng lint",
"e2e": "protractor ./protractor.conf.js",
"build.dist": "gulp all",
"build.webpack.sampleapp": "rimraf build-sampleapp && webpack --config config/webpack.build.sampleapp.js --progress --profile --bail",
"tslint": "gulp tslint",
"ngc": "ngc -p tsconfig.publish.json",
"bundle": "rollup -c rollup.config.js && uglifyjs npmdist/bundles/mydatepicker.umd.js --compress --mangle --screw-ie8 -o npmdist/bundles/mydatepicker.umd.min.js",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
"prettier": "prettier --write \"src/**/*.{ts,tsx,css,scss}\""
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "7.0.1",
"@angular/common": "7.0.1",
"@angular/compiler": "7.0.1",
"@angular/core": "7.0.1",
"@angular/forms": "7.0.1",
"@angular/http": "7.0.1",
"@angular/platform-browser": "7.0.1",
"@angular/platform-browser-dynamic": "7.0.1",
"@angular/platform-server": "7.0.1",
"@angular/platform-webworker": "7.0.1",
"@angular/platform-webworker-dynamic": "7.0.1",
"@angular/router": "7.0.1",
"@types/html2canvas": "0.0.33",
"@types/lodash": "^4.14.119",
"amazon-cognito-identity-js": "^2.0.30",
"anychart": "^8.4.2",
"classlist.js": "^1.1.20150312",
"core-js": "^2.6.1",
"fetch-polyfill": "^0.8.2",
"file-saver": "^1.3.8",
"html2canvas": "^1.0.0-alpha.12",
"jquery": "^3.3.1",
"jspdf": "^1.4.1",
"moment": "^2.23.0",
"mydatepicker": "^2.6.6",
"ng-inline-href": "^2.1.2",
"ng2-archwizard": "^2.1.0",
"ng2-date-picker": "^2.11.0",
"ng4-datepicker": "^1.0.12",
"ngx-cookie-service": "^2.1.0",
"popper.js": "^1.14.6",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3",
"whatwg-fetch": "^3.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.10.7",
"@angular-devkit/core": "7.0.3",
"@angular/cli": "^7.1.3",
"@angular/compiler-cli": "7.0.1",
"@angular/language-service": "7.0.1",
"@types/googlemaps": "^3.30.16",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "^2.0.6",
"@types/jquery": "^3.3.27",
"@types/jspdf": "^1.2.2",
"@types/node": "^6.14.2",
"autoprefixer": "^7.2.3",
"child-proc": "0.0.1",
"circular-dependency-plugin": "^4.2.1",
"codelyzer": "^4.5.0",
"copy-webpack-plugin": "~4.4.1",
"file-loader": "^1.1.5",
"gulp": "^4.0.0",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.7.0",
"gulp-iife": "^0.4.0",
"gulp-jshint": "^2.0.4",
"gulp-merge-media-queries": "^0.2.1",
"gulp-minify-html": "^1.0.6",
"gulp-ng-template": "^0.2.3",
"gulp-postcss": "^6.2.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.9.1",
"gulp-svgmin": "^1.2.3",
"gulp-svgstore": "^6.1.0",
"gulp-util": "^3.0.7",
"html-webpack-plugin": "^2.29.0",
"istanbul-instrumenter-loader": "^3.0.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "^3.1.3",
"karma-chrome-launcher": "~2.1.1",
"karma-coverage-istanbul-reporter": "^1.4.3",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"less-loader": "^4.0.5",
"lodash": "^4.17.11",
"map-stream": "0.0.7",
"node-sass": "^4.11.0",
"p-locate": "^2.0.0",
"path": "^0.12.7",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.1.6",
"postcss-url": "^7.1.2",
"prettier": "^1.14.3",
"protractor": "^5.4.1",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"stylus-loader": "^3.0.1",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "3.1.4",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^0.6.2",
"webpack": "^4.27.1",
"webpack-dev-middleware": "^1.10.2",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^4.1.0",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.10",
"yargs": "^8.0.2"
}
}
谢谢!