錯誤 TS2307：在 ionic 4 中找不到模塊“@ionic-native/date-picker/ngx”

Question

我正在使用 ionic 4 為 android 和 ios 平台實現日期選擇器。但我在 module.ts 類中收到此錯誤。 使用的cmds -

離子cordova插件添加cordova-plugin-datepicker

npm install --save @ionic-native/date-picker

這是我的 package.json 文件

     {
  "name": "sample",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ionic-native/calendar": "^5.0.0-beta.14",
    "@ionic-native/core": "^5.17.1",
    "@ionic-native/date-picker": "^4.20.0",
    "@ionic-native/keyboard": "^5.17.1",
    "@ionic-native/native-storage": "^5.17.1",
    "@ionic-native/secure-storage": "^5.17.1",
    "@ionic-native/splash-screen": "^5.17.1",
    "@ionic-native/status-bar": "^5.17.1",
    "@ionic/angular": "^4.11.5",
    "@ionic/storage": "^2.2.0",
    "@types/crypto-js": "^3.1.43",
    "@types/hammerjs": "^2.0.36",
    "bootstrap": "^4.4.1",
    "cordova-browser": "^6.0.0",
    "cordova-plugin-datepicker": "^0.9.3",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-splashscreen": "^5.0.3",
    "core-js": "^2.5.4",
    "crypto-js": "^3.1.9-1",
    "hammerjs": "^2.0.8",
    "ionic-long-press": "^2.0.2",
    "rxjs": "~6.5.1",
    "rxjs-compat": "^6.5.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "~2.0.0",
    "@ionic/lab": "2.0.13",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-ionic-webview": "^4.1.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-datepicker": {}
    },
    "platforms": [
      "ios",
      "browser",
      "android"
    ]
  }
}

和我的 module.ts 類 -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IonicStorageModule } from '@ionic/storage';
import { AuthGuard } from './guards/auth.guard';
import { AuthenticationService } from './services/authentication.service';
import { HttpClientModule }    from '@angular/common/http';
import { NativeStorage } from '@ionic-native/native-storage/ngx';
import {EncrDecrService} from './services/encr-decr-service.service';

import {SortPageModule} from './pages/sort/sort.module';
import {FilterPageModule} from './pages/filter/filter.module';
import { IonicGestureConfig } from 'src/utils/IonicGestureConfig';
import { AlarmOptionsPageModule } from './pages/alarm-options/alarm-options.module';
import { ReassignAlarmPageModule } from './pages/reassign-alarm/reassign-alarm.module';
import { RestoreAvailablePageModule } from './pages/restore-available/restore-available.module';
import { Keyboard } from '@ionic-native/keyboard/ngx';
import { DatePicker } from '@ionic-native/date-picker/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    IonicStorageModule.forRoot(),
    HttpClientModule,
    SortPageModule,
    AlarmOptionsPageModule,
    ReassignAlarmPageModule,
    RestoreAvailablePageModule,
    FilterPageModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AuthGuard,
    AuthenticationService,
    NativeStorage,
    EncrDecrService,
    Keyboard,
    DatePicker,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {
      provide: IonicGestureConfig,
      useClass: IonicGestureConfig
  },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

我得到了低於錯誤 -

[ng] src/app/app.module.ts 中的錯誤：25:28 - 錯誤 TS2307：找不到模塊“@ionic-native/date-picker/ngx”。 [ng] 25 import { DatePicker } from '@ionic-native/ date- picker /ngx';

Answer 1

我認為您應該首先使用以下命令卸載它：

npm uninstall --save @ionic-native/date-picker

然后使用以下命令再次安裝它：

npm install --save @ionic-native/date-picker@latest

這應該有效。 不要忘記更新package.json文件並導入module.ts文件。