Module not found: Error: Can't resolve 'dropzone'

Question

从 Angular 4.4 迁移到 Angular 8.0 后。我遇到以下错误：

ERROR in ./src/attributes/import/import.component.ts Module not found: Error: Can't resolve 'dropzone' in 'C:....\src\attributes\import'

我已经删除了我的node_modules；清理缓存；使用 yarn 重新安装了所有依赖项，但我仍然坚持使用它。

这是我在 .ts 文件中的声明方式。

import * as  Dropzone from 'dropzone';

我可以看到文件夹 C:\ ..\ ..\node_modules@types\dropzone 存在。

我的 tsconfig.json 文件位于 src 文件夹中：

{
"compilerOptions": {
  "declaration": false,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "lib": [ "es6", "dom" ],
  "mapRoot": "./",
  "module": "es6",
  "moduleResolution": "node",
  "outDir": "../dist/out-tsc",
  "sourceMap": true,
  "target": "es5",
  "typeRoots": [
      "../node_modules/@types"
    ],
  "baseUrl": ".",
  "paths": {
    "@abp/*": [ "../node_modules/abp-ng2-module/dist/src/*" ],
    "@app/*": [ "./app/*" ],
    "@shared/*": [ "./shared/*" ],
    "@node_modules/*": [ "../node_modules/*" ],
    "rxjs": ["../node_modules/rxjs/*"]
  }
},
"exclude": [
  "node_modules"
]

}

这是我的 package.json

"dependencies": {
"@angular/animations": "^8.0.3",
"@angular/common": "^8.0.3",
"@angular/compiler": "^8.0.3",
"@angular/core": "^8.0.3",
"@angular/forms": "^8.0.3",
"@angular/platform-browser": "^8.0.3",
"@angular/platform-browser-dynamic": "^8.0.3",
"@angular/router": "^8.0.3",
"@angular/service-worker": "^8.0.3",
"@fortawesome/fontawesome-free": "^5.1.0",
"@types/bootstrap": "^3.3.36",
"@types/dropzone": "^5.0.6",
"@types/file-saver": "0.0.1",
"@types/jquery": "^2.0.48",
"@types/jquery.blockui": "0.0.27",
"@types/lodash": "^4.14.82",
"@types/moment": "^2.13.0",
"@types/moment-timezone": "^0.2.35",
"@types/signalr": "^2.2.35",
"@types/toastr": "^2.1.35",
"abp-ng2-module": "^4.0.0",
"abp-web-resources": "^3.8.5",
"ace-builds": "^1.4.5",
"angular2-hotkeys": "^2.1.4",
"angular2-query-builder": "^0.4.2",
"block-ui": "^2.70.1",
"bootstrap": "^3.3.7",
"bootswatch": "^3.3.7",
"chart.js": "^2.7.2",
"core-js": "^2.5.1",
"file-saver": "^1.3.3",
"install": "^0.12.2",
"jquery": "^3.4.1",
"jquery-migrate": "^3.0.1",
"js-cookie": "^2.1.4",
"lodash": "^4.17.11",
"moment": "^2.20.1",
"moment-timezone": "^0.5.13",
"ng2-ace-editor": "^0.3.9",
"ngx-bootstrap": "^1.9.3",
"ngx-clipboard": "^12.1.2",
"ngx-device-detector": "^1.3.7",
"ngx-vis": "0.1.0",
"ngx-window-token": "0.0.4",
"nswag": "^13.0.3",
"primeng": "^4.3.0",
"push.js": "0.0.12",
"restore": "^0.3.0",
"rxjs": "^6.5.2",
"rxjs-compat": "6.5.2",
"signalr": "^2.2.2",
"simple-line-icons": "^2.4.1",
"spin.js": "^2.3.2",
"sweetalert": "^1.1.3",
"toastr": "^2.1.4",
"ts-helpers": "^1.1.2",
"tslib": "^1.9.0",
"tslint": "^5.18.0",
"typescript": "3.4.5",
"typescript-string-operations": "^1.2.4",
"update": "^0.7.4",
"xlsx": "0.10.8",
"zone.js": "~0.9.1"
 },
"devDependencies": {
  "@angular-devkit/build-angular": "~0.800.6",
  "@angular/cli": "~8.0.6",
  "@angular/compiler-cli": "~8.0.3",
  "@angularclass/hmr": "^1.2.2",
  "@angular/language-service": "~7.0.0",
  "angular2-dropzone-wrapper":"^2.0.3",
  "@types/jasminewd2": "~2.0.3",
  "@types/node": "~8.9.4",
  "@types/jasmine": "^2.5.53",
  "codelyzer": "^5.0.1",
  "install-peers": "^1.0.3",
  "jasmine-core": "^2.7.0",
  "jasmine-spec-reporter": "^3.2.0",
   "karma": "^2.0.3",
  "karma-chrome-launcher": "^2.2.0",
  "karma-cli": "^1.0.1",
  "karma-coverage-istanbul-reporter": "^0.2.3",
  "karma-jasmine": "^1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "protractor": "^5.3.2",
  "ts-node": "^7.0.0",
  "tslint": "^5.18.0",
  "typescript": "3.4.5"
 }

我错过了什么？

在此先感谢您的帮助。

Answer 1

您需要将 dropzone js 导入 angular.json

中的脚本部分

"scripts": [  
 "node_modules/dropdzone-path/something" 
]

然后在你的 tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["jquery", "Dropzone"] // add here 
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

因此您可以删除组件中的 import dropzone

import * as  Dropzone from 'dropzone'; //remove this

Answer 2

安装 dropzone 包解决了问题。在我只安装之前： @types/dropzone.

yarn add dropzone

Answer 3

就run npm add dropzone.

为了在我的打字稿代码中使用 DropZone 类型，我首先使用 npm install --save-dev @types/dropzone 安装了它。在运行这之后，我可以访问 DropZone class、属性和事件。

但是在编译 ts 代码之后，我得到了

'can not resolve Dropzone in ....\'

但是当我运行npm add dropzone时，构建成功了。

Module not found: Error: Can't resolve 'dropzone'

Module not found: Error: Can't resolve 'dropzone'

javascript

single-page-application

typescript

angular

angular8