main.js：61208未捕获错误：找不到模块“ionic-native”

时间：2017-04-24 11:24:29

标签： angular typescript ionic-framework ionic2

我试过npm install @ionic-native/core --save 

npm install ionic-native --save

类型类型脚本的代码：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import{HomePage}from '../home/home';
import { ActionSheetController, ToastController, Platform, LoadingController, Loading } from 'ionic-angular';
import { Camera, File, Transfer, FilePath } from 'ionic-native';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
declare var cordova: any;
/**
 * Generated class for the SelectImage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@Component({
  selector: 'page-select-image',
  templateUrl: 'select-image.html',
})
export class SelectImage {
category:any
sub_category:any
area:any
street:any
station:any
price:any
rupees_in:any
description:any
data:any;
fetch:any[];
lastImage: string = null;
loading: Loading;
Camera:any;
File:any;
FilePath:any;
fileTransfer:any;
constructor(public navCtrl: NavController, public navParams: NavParams, public actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController, public platform: Platform, public loadingCtrl: LoadingController,public http:Http) {
    this.category=this.navParams.get("category");
    this.sub_category=this.navParams.get("sub_category");
    this.area=this.navParams.get("area");
    this.street=this.navParams.get("street");
    this.station=this.navParams.get("station");
    // console.log(this.category);
    // console.log(this.sub_category);
    // console.log(this.area);
    // console.log(this.street);
    // console.log(this.station);
   this.data={}; 
    this.data.price="";
    this.data.rupees_in="";
    this.data.description="";
    // this.Camera="";
    // this.File="";
    // this.FilePath="";
    // this.fileTransfer="";
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SelectImage');
  }
  public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Image Source',
      buttons: [
        {
          text: 'Load from Library',
          handler: () => {
            this.takePicture(Camera.PictureSourceType.PHOTOLIBRARY);
          }
        },
        {
          text: 'Use Camera',
          handler: () => {
            this.takePicture(Camera.PictureSourceType.CAMERA);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }

public takePicture(sourceType) {
  // Create options for the Camera Dialog
  var options = {
    quality: 100,
    sourceType: sourceType,
    saveToPhotoAlbum: false,
    correctOrientation: true
  };

  // Get the data of an image
  Camera.getPicture(options).then((imagePath) => {
    // Special handling for Android library
    if (this.platform.is('android') && sourceType === Camera.PictureSourceType.PHOTOLIBRARY) {
      FilePath.resolveNativePath(imagePath)
      .then(filePath => {
          let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
          let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
        this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
      });
    } else {
      var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
      var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
      this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
    }
  }, (err) => {
    this.presentToast('Error while selecting image.');
  });
}

// Create a new name for the image
private createFileName() {
  var d = new Date(),
  n = d.getTime(),
  newFileName =  n + ".jpg";
  return newFileName;
}

// Copy the image to a local folder
private copyFileToLocalDir(namePath, currentName, newFileName) {
  File.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
    this.lastImage = newFileName;
  }, error => {
    this.presentToast('Error while storing file.');
  });
}

private presentToast(text) {
  let toast = this.toastCtrl.create({
    message: text,
    duration: 3000,
    position: 'top'
  });
  toast.present();
}

// Always get the accurate path to your apps folder
public pathForImage(img) {
  if (img === null) {
    return '';
  } else {
    return cordova.file.dataDirectory + img;
  }
}


public uploadImage() {
  // Destination URL
   var url = "http://progressiveit.in/mumbai_flat/property_details_img.php";

  // File for Upload
  var targetPath = this.pathForImage(this.lastImage);

  // File name only
  var filename = this.lastImage;

  var options = {
    fileKey: "file",
    fileName: filename,
    chunkedMode: false,
    mimeType: "multipart/form-data",
    params : {'fileName': filename}
  };

  const fileTransfer = new Transfer();

  this.loading = this.loadingCtrl.create({
    content: 'Uploading...',
  });
  this.loading.present();

  // Use the FileTransfer to upload the image
  fileTransfer.upload(targetPath, url, options).then(data => {
    this.loading.dismissAll()
    this.presentToast('Image succesful uploaded.');



  }, err => {
    this.loading.dismissAll()
    this.presentToast('Error while uploading file.');
  });


}


}

php代码：

<?php
header('Access-Control-Allow-Origin: *');
$target_path = "doc/";

$target_path = $target_path . basename( $_FILES['file']['name']);

if (move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
    echo "Upload and move success";
} else {
echo $target_path;
    echo "There was an error uploading the file, please try again!";
}
?>

即使我在类型脚本中尝试了其他方法 这一次它没有显示没有显示此main.js:61208 Uncaught Error: Cannot find module "ionic-native"错误，但在上传其图像时，它的工作只显示正在加载...... 

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import{HomePage}from '../home/home';
import { ActionSheetController, ToastController, Platform, LoadingController, Loading } from 'ionic-angular';
import { Transfer, FileUploadOptions, TransferObject } from '@ionic-native/transfer';
import { FilePath } from '@ionic-native/file-path';
import { File } from '@ionic-native/file';
import { Camera, CameraOptions } from '@ionic-native/camera';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
declare var cordova: any;
/**
 * Generated class for the SelectImage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@Component({
  selector: 'page-select-image',
  templateUrl: 'select-image.html',
})
export class SelectImage {
category:any
sub_category:any
area:any
street:any
station:any
price:any
rupees_in:any
description:any
data:any;
fetch:any[];
lastImage: string = null;
loading: Loading;
Camera:any;
File:any;
FilePath:any;
fileTransfer:any;
  constructor(public navCtrl: NavController, public navParams: NavParams, public actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController, public platform: Platform, public loadingCtrl: LoadingController,public http:Http,private camera: Camera,private file: File,private filePath: FilePath,private transfer: Transfer) {
    this.category=this.navParams.get("category");
    this.sub_category=this.navParams.get("sub_category");
    this.area=this.navParams.get("area");
    this.street=this.navParams.get("street");
    this.station=this.navParams.get("station");
    // console.log(this.category);
    // console.log(this.sub_category);
    // console.log(this.area);
    // console.log(this.street);
    // console.log(this.station);
   this.data={}; 
    this.data.price="";
    this.data.rupees_in="";
    this.data.description="";
    // this.Camera="";
    // this.File="";
    // this.FilePath="";
    // this.fileTransfer="";
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SelectImage');
  }
    public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Image Source',
      buttons: [
        {
          text: 'Load from Library',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
          }
        },
        {
          text: 'Use Camera',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.CAMERA);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }

public takePicture(sourceType) {
  // Create options for the Camera Dialog
  var options = {
    quality: 100,
    sourceType: sourceType,
    saveToPhotoAlbum: false,
    correctOrientation: true
  };

  // Get the data of an image
  this.camera.getPicture(options).then((imagePath) => {
    // Special handling for Android library
    if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
      this.filePath.resolveNativePath(imagePath)
      .then(filePath => {
          let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
          let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
        this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
      });
    } else {
      var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
      var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
      this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
    }
  }, (err) => {
    this.presentToast('Error while selecting image.');
  });
}
// Create a new name for the image
private createFileName() {
  var d = new Date(),
  n = d.getTime(),
  newFileName =  n + ".jpg";
  return newFileName;
}

// Copy the image to a local folder
private copyFileToLocalDir(namePath, currentName, newFileName) {
  this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
    this.lastImage = newFileName;
  }, error => {
    this.presentToast('Error while storing file.');
  });
}

private presentToast(text) {
  let toast = this.toastCtrl.create({
    message: text,
    duration: 3000,
    position: 'top'
  });
  toast.present();
}

// Always get the accurate path to your apps folder
public pathForImage(img) {
  if (img === null) {
    return '';
  } else {
    return cordova.file.dataDirectory + img;
  }
}



public uploadImage() {
  // Destination URL
  var url = "http://progressiveit.in/mumbai_flat/property_details_img.php";

  // File for Upload
  var targetPath = this.pathForImage(this.lastImage);

  // File name only
  var filename = this.lastImage;

  var options = {
    fileKey: "file",
    fileName: filename,
    chunkedMode: false,
    mimeType: "multipart/form-data",
    params : {'fileName': filename}
  };

  const fileTransfer = new Transfer();

  this.loading = this.loadingCtrl.create({
    content: 'Uploading...',
  });
  this.loading.present();

  // Use the FileTransfer to upload the image
  this.fileTransfer.upload(targetPath, url, options).then(data => {
    this.loading.dismissAll()
    this.presentToast('Image succesful uploaded.');


  }, err => {
    this.loading.dismissAll()
    this.presentToast('Error while uploading file.');
  });
}   
}

package.json文件

{
  "_args": [
    [
      {
        "raw": "ionic-native@^3.5.0",
        "scope": null,
        "escapedName": "ionic-native",
        "name": "ionic-native",
        "rawSpec": "^3.5.0",
        "spec": ">=3.5.0 <4.0.0",
        "type": "range"
      },
      "F:\\Progressive\\ionic\\Mumbai_flat"
    ]
  ],
  "_from": "ionic-native@>=3.5.0 <4.0.0",
  "_id": "ionic-native@3.5.0",
  "_inCache": true,
  "_location": "/ionic-native",
  "_nodeVersion": "7.4.0",
  "_npmOperationalInternal": {
    "host": "packages-18-east.internal.npmjs.com",
    "tmp": "tmp/ionic-native-3.5.0.tgz_1492552188808_0.35551156126894057"
  },
  "_npmUser": {
    "name": "ihadeed",
    "email": "i.hadeed@zyra.ca"
  },
  "_npmVersion": "4.0.5",
  "_phantomChildren": {},
  "_requested": {
    "raw": "ionic-native@^3.5.0",
    "scope": null,
    "escapedName": "ionic-native",
    "name": "ionic-native",
    "rawSpec": "^3.5.0",
    "spec": ">=3.5.0 <4.0.0",
    "type": "range"
  },
  "_requiredBy": [
    "#USER",
    "/"
  ],
  "_resolved": "https://registry.npmjs.org/ionic-native/-/ionic-native-3.5.0.tgz",
  "_shasum": "08d9bd2488d6bddff0c1c594dc4e647242efbd55",
  "_shrinkwrap": null,
  "_spec": "ionic-native@^3.5.0",
  "_where": "F:\\Progressive\\ionic\\Mumbai_flat",
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "dependencies": {},
  "description": "Native plugin wrappers for Cordova and Ionic with TypeScript, ES6+, Promise and Observable support",
  "devDependencies": {
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "canonical-path": "0.0.2",
    "child-process-promise": "2.2.0",
    "conventional-changelog-cli": "1.2.0",
    "cpr": "2.0.2",
    "cz-conventional-changelog": "1.2.0",
    "decamelize": "1.2.0",
    "dgeni": "0.4.7",
    "dgeni-packages": "0.16.10",
    "fs-extra": "2.0.0",
    "fs-extra-promise": "0.4.1",
    "gulp": "3.9.1",
    "gulp-rename": "1.2.2",
    "gulp-replace": "0.5.4",
    "gulp-tslint": "6.1.2",
    "lodash": "4.17.4",
    "minimist": "1.1.3",
    "node-html-encoder": "0.0.2",
    "q": "1.4.1",
    "queue": "4.2.1",
    "rimraf": "2.5.4",
    "rxjs": "5.0.1",
    "semver": "5.3.0",
    "tslint": "3.15.1",
    "tslint-ionic-rules": "0.0.7",
    "typescript": "2.0.09",
    "zone.js": "0.7.2"
  },
  "directories": {},
  "dist": {
    "shasum": "08d9bd2488d6bddff0c1c594dc4e647242efbd55",
    "tarball": "https://registry.npmjs.org/ionic-native/-/ionic-native-3.5.0.tgz"
  },
  "gitHead": "7df7a557da3cd2ea2064fb0343dcda6a4b6b7949",
  "license": "MIT",
  "maintainers": [
    {
      "name": "ihadeed",
      "email": "i.hadeed@zyra.ca"
    },
    {
      "name": "ionicjs",
      "email": "hi@ionicframework.com"
    },
    {
      "name": "maxlynch",
      "email": "max@ionic.io"
    },
    {
      "name": "tlancina",
      "email": "tim@ionic.io"
    }
  ],
  "name": "ionic-native",
  "optionalDependencies": {},
  "readme": "ERROR: No README data found!",
  "scripts": {
    "build": "npm run clean && npm run lint && npm run build:core && npm run build:modules",
    "build:core": "ngc -p scripts/build/tsconfig-core.json",
    "build:modules": "node scripts/build/build.js",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
    "clean": "rimraf dist .tmp",
    "lint": "gulp lint",
    "npmpub": "node scripts/build/publish.js",
    "postchangelog": "git commit -am \"chore(): update changelog\"",
    "shipit": "npm run build && gulp readmes && npm run npmpub",
    "start": "npm run test:watch"
  },
  "version": "3.5.0"
}

2 个答案:

答案 0 :(得分：0)

你不能同时使用两者。你必须使用最新的npm install @ionic-native/core --save。您需要从ionic-native中删除package.json，然后在npm i之后删除。

您必须将所有原生插件实现为providers。

您可以在official doc here上了解有关此新实施的更多信息。

答案 1 :(得分：0)

将离子原生更新为最新

npm uninstall --save @ionic-native/core
npm install --save @ionic-native/core@latest
相关问题
最新问题