Ionic 3：Type 'any' 不是构造函数类型

Question

当我应付并转移到具有 ionic 3 的 mac 时，我在我的 linux 任务中有我的 ionic 2 项目。

所以我创建了一个新项目并用新项目替换了页面、提供、组件文件夹，在将插件导入 app.modulte.ts 文件后，我遇到了cannot find module "ionic-native" 之类的错误，我收到的错误为“类型” any' 不是构造函数类型。`

我的终端显示

17:39:48]  typescript: node_modules/@ionic-native/app-version/index.d.ts, line: 25
            Type 'any' is not a constructor function type. [17:39:48]  typescript: node_modules/@ionic-native/geolocation/index.d.ts, line: 127 [17:39:48]  typescript: node_modules/@ionic-native/google-analytics/index.d.ts, line: 30 [17:39:48]  typescript: node_modules/@ionic-native/network/index.d.ts, line: 49 [17:39:48]  typescript: node_modules/@ionic-native/sms/index.d.ts, line: 41 [17:39:48]  typescript: node_modules/@ionic-native/social-sharing/index.d.ts, line: 29 [17:39:48]  typescript: node_modules/@ionic-native/sqlite/index.d.ts, line: 115

      L25:  export declare class AppVersion extends IonicNativePlugin {

            Type 'any' is not a constructor function type.

     L127:  export declare class Geolocation extends IonicNativePlugin {

            Type 'any' is not a constructor function type.

      L30:  export declare class GoogleAnalytics extends IonicNativePlugin {

            Type 'any' is not a constructor function type.

      L49:  export declare class Network extends IonicNativePlugin {

            Type 'any' is not a constructor function type.

      L41:  export declare class SMS extends IonicNativePlugin {

            Type 'any' is not a constructor function type.

      L29:  export declare class SocialSharing extends IonicNativePlugin {

            Type 'any' is not a constructor function type.

     L115:  export declare class SQLite extends IonicNativePlugin {

[17:39:48]  dev server running: http://localhost:8100/

在我的浏览器中出现 之类的错误

这是我的 package.json 文件

{
  "name": "ionic-hello-world",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/compiler-cli": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@ionic-native/app-version": "^3.6.1",
    "@ionic-native/geolocation": "^3.6.1",
    "@ionic-native/google-analytics": "^3.6.1",
    "@ionic-native/network": "^3.6.1",
    "@ionic-native/sms": "^3.6.1",
    "@ionic-native/social-sharing": "^3.6.1",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/sqlite": "^3.6.1",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.1.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.6",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard",
    "cordova-plugin-android-permissions",
    "cordova-plugin-app-version",
    "cordova-plugin-geolocation",
    "cordova-plugin-google-analytics",
    "cordova-plugin-network-information",
    "cordova-plugin-sms",
    "cordova-plugin-x-socialsharing",
    "cordova-sqlite-storage"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "description": "kmart: An Ionic project"
}

使用npm install @ionic-native/core --save 后，我遇到了 之类的错误

Answer 1

要使用ionic-native 3.x，您需要安装@ionic-native/core。

npm install @ionic-native/core@3.6.1 --save

Answer 2

我的 package.json 中有 @ionic-native/core ^3.6.0。对我来说，问题是通过导入我的插件来解决的，比如

import {File, Transfer, FilePath} from "ionic-native";

而不是

import {FilePath} from "@ionic-native/file-path";
import {Transfer} from "@ionic-native/transfer";
import {File} from "@ionic-native/file";

Answer 3

昨天我在将我相当旧的版本更新为新版本后遇到了同样的问题。 我必须执行很多步骤才能使其最终发挥作用。这是我需要做的，或者我如何解决它。 首先我创建了一个“虚拟”项目

ionic start myApp tabs

我打开了package.json 并将所有版本与我当前的版本进行了比较并相应地更新了它们（您可能想使用npm outdated 查看最新版本和您安装的版本）。

不幸的是，这并没有解决我的问题，我可以构建我的项目，但我遇到了和你一样的错误cannot find module "ionic-native" 启动后。

在阅读了很多帖子和提示后，我做了以下事情（还有很多其他错误出现，这就是我解决所有这些错误的方法）。

打开app.module.ts 并检查您的导入
前：

imports: [
   IonicModule.forRoot(MyApp),
   Ionic2RatingModule
]

之后：

imports: [
   BrowserModule,
   IonicModule.forRoot(MyApp),
   Ionic2RatingModule,
   HttpModule /* in case you used http before */
]

下一个重要步骤是在整个代码中搜索
import from "ionic-native"

如果您发现类似的东西，您必须将其更改/更新到新版本。 （通常用于 app.component.ts 中的 splashScreen 和 statusBar）

之前：

import { StatusBar, Splashscreen } from 'ionic-native';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = HomePage;    
  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
    platform.pause.subscribe(e=>{

    })
  }
}

之后：

 import {StatusBar} from "@ionic-native/status-bar";
 import {SplashScreen} from "@ionic-native/splash-screen";
   @Component({
     templateUrl: 'app.html'
   })
   export class MyApp {
     rootPage = HomePage;

    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
      platform.ready().then(() => {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        statusBar.styleDefault();
        splashScreen.hide();
      });
      platform.pause.subscribe(e => {

      })
    }
  }

检查构造函数和导入，它们改变了！ 我必须对通过 MODULE import from "ionic-native" 导入的所有内容进行所有这些更改，例如：StatusBar, SplashScreen, Camera, Network, Transfer, Geolocation ... 另请记住，现在您必须将它们添加到 app.module.ts 中的 providers 部分
如果您再也找不到模块（就像我遇到的相机一样），请确保导入正确的离子模块npm install --save @ionic-native/camera
最后，你应该找不到任何
MODULE import from "ionic-native"
再次在您的代码中。 希望它可以帮助某人:)