在做Angular Future模块时出现ContextElementDependency依赖错误(延迟加载)

时间:2019-03-06 12:53:41

标签: javascript angular typescript

此问题已在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"
  }
}

谢谢!

0 个答案:

没有答案