安装Ag Grid后出错 - Angular 2

时间:2017-03-23 13:51:17

标签: angular npm-install ag-grid

按照此处的说明“https://www.ag-grid.com/best-angular-2-data-grid/?framework=angular#gsc.tab=0”后 为角度2安装ag-grid并运行命令 npm i ag-grid --save npm i ag-grid-angular --save

当我运行npm start并且无法运行应用程序时,我收到这些错误:

ERROR in .//jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'xmlhttprequest' in 'ProjectPath\node_modules\jquery\lib'
@ .//jquery/lib/node-jquery.js 8:28-53
@ ./src/vendor.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in .//jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'location' in 'ProjectPath\node_modules\jquery\lib'
@ .//jquery/lib/node-jquery.js 13:24-43
@ ./src/vendor.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in .//jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'navigator' in 'ProjectPath\node_modules\jquery\lib'
@ .//jquery/lib/node-jquery.js 17:25-45
@ ./src/vendor.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in .//jsdom/lib/jsdom/living/xmlhttprequest.js
Module not found: Error: Can't resolve 'child_process' in 'ProjectPath\node_modules\jsdom\lib\jsdom\living'
@ .//jsdom/lib/jsdom/living/xmlhttprequest.js 4:18-42
@ .//jsdom/lib/jsdom/browser/Window.js
@ .//jsdom/lib/jsdom.js
@ ./~/jquery/lib/node-jquery.js
@ ./src/vendor.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts
webpack: Failed to compile.

我也得到了这个警告:

WARNING in ./~/jsdom/lib/jsdom/utils.js
216:21-40 Critical dependency: the request of a dependency is an expression

WARNING in ./~/jsdom/lib/jsdom/living/xmlhttprequest.js
20:23-30 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/ajv/lib/async.js
96:20-33 Critical dependency: the request of a dependency is an expression

WARNING in ./~/ajv/lib/async.js
119:15-28 Critical dependency: the request of a dependency is an expression

WARNING in ./~/ajv/lib/compile/index.js
13:21-34 Critical dependency: the request of a dependency is an expression

注意:我使用smartadmin作为种子项目,因此它有很多依赖项和配置

更新 当我用angular cli创建干净的新项目并安装ag网格时,项目没有问题

这是我的Package.json

{
  "name": "smartadmin",
  "version": "0.3.1",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "build:dev": "./node_modules/.bin/ng build",
    "build:prod": "./node_modules/.bin/ng build --prod --aot=false",
    "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\"",
    "postversion": "git push && git push --tags",
    "prebuild:dev": "npm run clean:dist",
    "prebuild:prod": "npm run clean:dist",
    "preclean:install": "npm run clean",
    "preclean:start": "npm run clean",
    "preversion": "npm test",
    "protractor": "protractor",
    "rimraf": "rimraf",
    "server:dev": "./node_modules/.bin/ng server",
    "server": "npm run server:dev",
    "start": "npm run server:dev",
    "test": "./node_modules/.bin/ng test",
    "tslint": "tslint",
    "typedoc": "typedoc",
    "version": "npm run build",
    "ng": "ng",
    "pree2e": "webdriver-manager update --standalone false --gecko false"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.4.9",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "@types/jquery": "^2.0.40",
    "@types/node": "^6.0.62",
    "X-editable": "github:vitalets/x-editable",
    "ag-grid": "^8.2.0",
    "ag-grid-angular": "^8.2.0",
    "bootstrap": "^3.3.7",
    "bootstrap-colorpicker": "^2.3.5",
    "bootstrap-duallistbox": "github:istvan-ujjmeszaros/bootstrap-duallistbox",
    "bootstrap-markdown": "^2.10.0",
    "bootstrap-progressbar": "^0.9.0",
    "bootstrap-slider": "^9.1.3",
    "bootstrap-tagsinput": "^0.7.1",
    "bootstrap-timepicker": "^0.5.2",
    "chart.js": "2.3.0",
    "clockpicker": "0.0.7",
    "clone": "~2.0.0",
    "core-js": "^2.4.1",
    "debounce": "^1.0.0",
    "dropzone": "^4.3.0",
    "dygraphs": "^1.1.1",
    "fuelux": "^3.15.8",
    "he": "^1.1.0",
    "highcharts": "^4.2.7",
    "ion-rangeslider": "^2.1.4",
    "jquery": "~2.2.4",
    "jquery-color": "^1.0.0",
    "jquery-jcrop": "^0.9.13",
    "jquery-knob": "^1.2.11",
    "jquery-ui-npm": "^1.12.0",
    "jquery-validation": "^1.15.1",
    "jquery.maskedinput": "^1.4.1",
    "markdown": "^0.5.0",
    "morris.js": "^0.5.0",
    "ng2-bootstrap": "^1.1.16-9",
    "ng2-popover": "0.0.13",
    "ng2-redux": "4.2.1",
    "nouislider": "^8.5.1",
    "raphael": "^2.2.1",
    "redux": "^3.6.0",
    "rxjs": "^5.0.1",
    "scriptjs": "^2.5.8",
    "select2": "^4.0.3",
    "smartadmin-plugins": "^1.0.15",
    "summernote": "^0.8.1",
    "to-markdown": "^3.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-beta.30",
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.40",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "css-loader": "^0.26.0",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.9.0",
    "imports-loader": "^0.7.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "raw-loader": "0.5.1",
    "script-loader": "^0.7.0",
    "style-loader": "^0.13.1",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3",
    "url-loader": "^0.5.7"
  },
  "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"
  }
}

1 个答案:

答案 0 :(得分:4)

在尝试运行智能管理模板的演示时,我遇到了与您相同的错误。我发现在node_modules文件夹下有'jQuery'文件夹,而不是'jquery'文件夹(小'q')。 所以,在我的例子中,我只是通过运行:“npm install jquery --save”来安装jquery模块,并且ng服务将很愉快地运行。