Question

当我使用loadchildren时，Webpack构建在遇到延迟加载的模块时失败＆＃34;没有可用于依赖类型的模块工厂：ContextElementDependency＆＃34; ，我有AppRoutingModule，如下所示：

export const routes: Routes = [
{
    path: '', component: ControllerComponent,
},
{
    path:'customer',loadChildren: 'app/customers/customers.module#CustomersModule'
},
{
    path: 'business', component: BusinessComponent,

},
{
    path:'**',component: NotfoundComponent
}
];

这里我有未来的模块：

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { CustomersRoutingModule } from './customers-routing.module';

import { CustomerListComponent } from './customer-list/customer- 
list.component';

@NgModule({

    imports: [

        CommonModule,

        CustomersRoutingModule

    ],

    declarations: [CustomerListComponent]
})
export class CustomersModule { }

此处我还有路由未来模块：

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { CommonModule } from '@angular/common';

import { CustomerListComponent } from './customer-list/customer- 
list.component';

const routes: Routes = [
   {
       path: '', component: CustomerListComponent
   }

];

@NgModule({

   imports: [RouterModule.forChild(routes) ,CommonModule],

   exports: [RouterModule]

})

export class CustomersRoutingModule { }

的package.json

{
     "name": "angularcli",
     "version": "0.0.0",
     "license": "MIT",
     "scripts": {
         "ng": "ng",
         "start": "ng serve --proxy-config proxy.conf.json",
         "build": "ng build --prod --aot",
         "test": "karma start ./karma.conf.js",
         "lint": "ng lint",
         "e2e": "protractor ./protractor.conf.js",
         "pree2e": "webdriver-manager update --standalone false --gecko 
         false -- 
         quiet"
     },

    "private": true,
    "dependencies": {
        "@angular/animations": "^5.0.0",
        "@angular/cdk": "github:angular/cdk-builds",
        "@angular/common": "^5.0.0",
        "@angular/compiler": "^5.0.0",
        "@angular/core": "^5.0.0",
        "@angular/forms": "^5.0.0",
        "@angular/http": "^5.0.0",
        "@angular/material": "github:angular/material2-builds",
        "@angular/platform-browser": "^5.0.0",
        "@angular/platform-browser-dynamic": "^5.0.0",
        "@angular/platform-server": "^5.0.0",
        "@angular/router": "^5.0.0",
        "@nguniversal/express-engine": "^5.0.0-beta.6",
        "bootstrap": "^3.3.7",
        "bootstrap-toggle": "^2.2.2",
        "core-js": "^2.4.1",
        "crypto-js": "^3.1.9-1",
        "hammerjs": "^2.0.8",
        "jquery": "^3.2.1",
        "jquery-color-animation": "^1.5.1",
        "jquery-zoom": "^1.7.20",
        "material-design-icons": "^3.0.1",
        "material-icons": "^0.1.0",
        "ngx-carousel": "^1.3.5",
        "ngx-device-detector": "^1.2.1",
        "rxjs": "^5.5.2",
        "zone.js": "^0.8.14"
    },

    "devDependencies": {
        "@angular/cli": "1.4.5",
        "@angular/compiler-cli": "^5.0.0",
        "@angular/language-service": "^4.2.4",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/jquery": "^3.2.16",
        "@types/node": "~6.0.60",
        "autoprefixer": "^6.5.3",
        "circular-dependency-plugin": "^3.0.0",
        "codelyzer": "~3.2.0",
        "copy-webpack-plugin": "^4.0.1",
        "css-loader": "^0.28.1",
        "cssnano": "^3.10.0",
        "exports-loader": "^0.6.3",
        "file-loader": "^0.10.0",
        "html-webpack-plugin": "^2.29.0",
        "istanbul-instrumenter-loader": "^2.0.0",
        "jasmine-core": "~2.6.2",
        "jasmine-spec-reporter": "~4.1.0",
        "karma": "~1.7.0",
        "karma-chrome-launcher": "~2.1.1",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^1.2.1",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "less-loader": "^4.0.5",
        "postcss-loader": "^1.3.3",
        "postcss-url": "^5.1.2",
        "protractor": "~5.1.2",
        "raw-loader": "^0.5.1",
        "sass-loader": "^6.0.3",
        "source-map-loader": "^0.2.0",
        "style-loader": "^0.13.1",
        "stylus-loader": "^3.0.1",
        "ts-node": "~3.2.0",
        "tslint": "~5.7.0",
        "typescript": "^2.4.2",
        "url-loader": "^0.6.0",
        "webpack": "~3.6.0",
        "webpack-concat-plugin": "1.4.0",
        "webpack-dev-server": "~2.7.1"
    }
}

我该怎么做才能解决这个问题？谢谢。

Answer 1

为此，我也不得不大费周章。

您要记住两件事。

事物1 ：（（基本上，您的package.json文件不应具有 webpack 作为依赖项或devDependency

npm remove webpack --save-dev

OR

npm remove webpack --save

rm -r node_modules
rm package-lock.json
npm install

第二件事 ：（您已经做对了）

从路径中删除“ ./”，例如：

loadChildren: 'app/home/home.module#HomeModule'

代替

loadChildren: './app/home/home.module#HomeModule'

当我使用loadchildren时，延迟加载未来模块不起作用

1 个答案: