角度错误没有可用于依赖类型的模块工厂:ContextElementDependency

时间:2018-02-14 16:30:52

标签: angular npm webpack

我尝试运行Angular 5应用程序并执行

npm install

npm start

我收到此错误:

ng serve

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 20% building modules 88/102 modules 14 active ..._modules\@angular\forms\esm5\forms.jsError: No module factory available for dependency type: ContextElementDependency
    at Compilation.addModuleDependencies (C:\dev\ssmith\github.com\ebs2\src\FrontEndSrc\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:215:21)
    at Compilation.processModuleDependencies (C:\dev\ssmith\github.com\ebs2\src\FrontEndSrc\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:204:8)
    at _this.buildModule.err (C:\dev\ssmith\github.com\ebs2\src\FrontEndSrc\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:359:14)
    at building.forEach.cb (C:\dev\ssmith\github.com\ebs2\src\FrontEndSrc\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:149:27)
    at Array.forEach (<anonymous>)
    at callback (C:\dev\ssmith\github.com\ebs2\src\FrontEndSrc\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:149:13)
    at module.build (C:\dev\ssmith\github.com\ebs2\src\FrontEndSrc\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:176:11)
    at resolveDependencies (C:\dev\ssmith\github.com\ebs2\src\FrontEndSrc\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:165:4)
    at ContextModule.result.resolveDependencies (C:\dev\ssmith\github.com\ebs2\src\FrontEndSrc\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:440:25)
    at ContextModule.build (C:\dev\ssmith\github.com\ebs2\src\FrontEndSrc\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:105:8)
    at Compilation.buildModule (C:\dev\ssmith\github.com\ebs2\src\FrontEndSrc\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:151:10)
    at factoryCallback (C:\dev\ssmith\github.com\ebs2\src\FrontEndSrc\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:344:12)
    at C:\dev\ssmith\github.com\ebs2\src\FrontEndSrc\node_modules\@angular\cli\node_modules\webpack\lib\ContextModuleFactory.js:95:13
    at C:\dev\ssmith\github.com\ebs2\src\FrontEndSrc\node_modules\tapable\lib\Tapable.js:268:11
    at done.then (C:\dev\ssmith\github.com\ebs2\src\FrontEndSrc\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:442:28)
    at <anonymous>                                                                                                                               70% building modules 1717/1717 modules 0 active

我已多次尝试删除并重新安装node_modules。我有一个使用相同代码没有遇到此问题的队友。但是,从源代码克隆到我的机器上的单独文件夹会导致相同的行为。

> npm --version

5.6.0

> ng --version

Angular: 5.0.5
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

@angular/cli: 1.6.8
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.23
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8
@schematics/angular: 0.1.17
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.11.0

的package.json

{
  "name": "smartadmin",
  "version": "0.6.1",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "build:dev": "./node_modules/.bin/ng build",
    "build:prod": "./node_modules/.bin/ng build --prod --aot=false",
    "build:aot": "./node_modules/.bin/ng build --prod --aot",
    "build:aot2": "node --max_old_space_size=4096 ./node_modules/.bin/ng build --prod --aot",
    "build": "npm run build:dev",
    "clean:dist": "npm run rimraf -- dist",
    "clean:install": "npm set progress=false && npm install",
    "clean:start": "npm start",
    "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
    "e2e:live": "npm run e2e -- --elementExplorer",
    "e2e": "npm run protractor",
    "lint": "npm run tslint \"src/**/*.ts\"",
    "prebuild:dev": "npm run clean:dist",
    "prebuild:prod": "npm run clean:dist",
    "preclean:install": "npm run clean",
    "preclean:start": "npm run clean",
    "protractor": "protractor",
    "rimraf": "rimraf",
    "server:dev": "./node_modules/.bin/ng serve",
    "serve": "npm run server:dev",
    "start": "npm run server:dev",
    "test": "./node_modules/.bin/ng test",
    "tslint": "tslint",
    "typedoc": "typedoc",
    "ng": "ng",
    "pree2e": "webdriver-manager update --standalone false --gecko false"
  },
  "private": true,
  "dependencies": {
    "@angular-redux/store": "7.0.1",
    "@angular/animations": "5.0.5",
    "@angular/common": "5.0.5",
    "@angular/compiler": "5.0.5",
    "@angular/core": "5.0.5",
    "@angular-devkit/schematics": "0.0.42",
    "@angular-devkit/core": "0.0.23",
    "@angular/forms": "5.0.5",
    "@angular/http": "5.0.5",
    "@angular/platform-browser": "5.0.5",
    "@angular/platform-browser-dynamic": "5.0.5",
    "@angular/router": "5.0.5",
    "@swimlane/ngx-datatable": "11.1.5",
    "X-editable": "github:vitalets/x-editable",
    "bootstrap": "3.3.7",
    "bootstrap-colorpicker": "2.5.2",
    "bootstrap-duallistbox": "3.0.6",
    "bootstrap-markdown": "2.10.0",
    "bootstrap-progressbar": "0.9.0",
    "bootstrap-slider": "10.0.0",
    "bootstrap-tagsinput": "0.7.1",
    "bootstrap-timepicker": "0.5.2",
    "chart.js": "2.7.1",
    "classlist.js": "^1.1.20150312",
    "clockpicker": "0.0.7",
    "clone": "2.1.1",
    "core-js": "2.5.1",
    "debounce": "1.1.0",
    "dropzone": "5.2.0",
    "dygraphs": "2.0.0",
    "fuelux": "3.16.2",
    "he": "1.1.1",
    "highcharts": "6.0.3",
    "ion-rangeslider": "2.2.0",
    "jquery": "3.2.1",
    "jquery-color": "git+https://github.com/jquery/jquery-color.git#9e5e04c1c4ee66427fbe04cfce8155b76748ca64",
    "jquery-jcrop": "0.9.13",
    "jquery-knob": "1.2.11",
    "jquery-ui-npm": "1.12.0",
    "jquery-validation": "1.17.0",
    "jquery.maskedinput": "1.4.1",
    "markdown": "0.5.0",
    "morris.js": "0.5.0",
    "ngx-bootstrap": "^2.0.1",
    "ngx-popover": "0.0.16",
    "nouislider": "10.1.0",
    "raphael": "2.2.7",
    "redux": "3.7.2",
    "rxjs": "5.5.2",
    "scriptjs": "2.5.8",
    "select2": "4.0.6-rc.1",
    "smartadmin-plugins": "1.0.21",
    "summernote": "0.8.8",
    "to-markdown": "3.1.0",
    "ts-helpers": "1.1.2",
    "web-animations-js": "2.3.1",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.4",
    "@angular/compiler-cli": "5.0.5",
    "@types/jasmine": "2.8.2",
    "@types/jquery": "3.2.16",
    "@types/node": "8.0.54",
    "codelyzer": "4.0.1",
    "css-loader": "0.28.7",
    "exports-loader": "0.6.4",
    "expose-loader": "0.7.4",
    "file-loader": "1.1.5",
    "imports-loader": "0.7.1",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.1",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-remap-istanbul": "0.6.0",
    "protractor": "5.2.0",
    "raw-loader": "0.5.1",
    "script-loader": "0.7.2",
    "style-loader": "0.19.0",
    "ts-node": "3.3.0",
    "tslint": "5.8.0",
    "typescript": "2.4.2",
    "url-loader": "0.6.2",
    "webpack": "^3.10.0"
  },
  "repository": {
    "type": "git",
    "url": "https://bitbucket.org/grigson/smartadmin-angular-2"
  },
  "bugs": {
    "url": "https://bitbucket.org/grigson/smartadmin-angular-2/issues"
  },
  "engines": {
    "node": ">= 4.2.1",
    "npm": ">= 3"
  }
}

2 个答案:

答案 0 :(得分:9)

这似乎解决了这个问题:

  1. Package.json:从DevDependencies中删除webpack
  2. rm -R node_modules (删除node_modules文件夹)
  3. npm i -g webpack
  4. npm i -g webpack-dev-server
  5. 删除package-lock.json(如果它在那里)
  6. npm i
  7. npm start
  8. 同时运行npm ls并查看webpack是否多次列出。这似乎是我问题的根源。

    相关答案: Angular No module factory available for dependency type: ContextElementDependency

答案 1 :(得分:0)

这似乎对我有用。 全局安装升级

  • npm卸载-g @ angular / cli
  • npm缓存验证
  • npm install -g @ angular / cli @ latest

本地安装升级

  • rm -rf node_modules dist
  • rm package-lock.json
  • npm安装