جاوااسکریپت - ماژول یافت نشد: خطا: نمیتوان 'dropzone' را پیدا کرد

پس از مهاجرت از Angular 4.4 به Angular 8.0، با خطای زیر مواجه شدهام:

خطا در ./src/attributes/import/import.component.ts ماژول یافت نشد: خطا: امکان حل 'dropzone' در '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"
 }

من چه چیزی کم دارم؟

پیشاپیش از کمک شما سپاسگزارم.

پاسخ شماره ۱

فقط npm add dropzone را اجرا کنید.

برای استفاده از نوع DropZone در کد تایپاسکریپت خود، ابتدا آن را با استفاده از npm install --save-dev @types/dropzone نصب کردم. پس از اجرای این دستور، توانستم به کلاس، خصوصیات و رویدادهای DropZone دسترسی پیدا کنم.

با این حال پس از کامپایل کردن کد TypeScript، من دریافت میکردم

نمیتوان Dropzone را در .... حل کرد

اما وقتی من npm add dropzone را اجرا کردم، ساخت موفق شد.

پاسخ شماره ۲

شما نیاز دارید که 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 * as  Dropzone from 'dropzone'; //remove this