在 ionic 应用程序中安装预构建主题时出现运行时错误

Question

我像往常一样使用npm 创建了一个离子应用程序，并按照readme.txt 文件在应用程序中分配主题我产生了错误：-

错误 1

C:/Users/cc/Eklavya1/src/app/app.module.ts

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { Camera } from '@ionic-native/camera'; 

import { MyApp } from './app.component';

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { Camera } from '@ionic-native/camera'; 

import { MyApp } from './app.component';


import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

var config = {

      backButtonText: '',

      backButtonIcon: 'ios-arrow-back',

      iconMode: 'ios',

      mode:'ios',

      modalEnter: 'modal-slide-in',

      modalLeave: 'modal-slide-out',

      pageTransition: 'ios',

    };

@NgModule({

  declarations: [

    MyApp,

  ],

  imports: [

    BrowserModule,

    IonicModule.forRoot(MyApp,config),

  ],

  bootstrap: [IonicApp],

  entryComponents: [

    MyApp,

  ],

  providers: [

    StatusBar,

    SplashScreen,

    Camera,

    {provide: ErrorHandler, useClass: IonicErrorHandler}

  ]

})

export class AppModule {}

找不到模块“ionic2-rating”。

C:/Users/cc/Eklavya1/src/pages/lesson-details/lesson-details.module.ts

import { LessonDetailsPage } from './lesson-details';

import { Ionic2RatingModule } from 'ionic2-rating';

lesson-detail.module.ts-->

import { NgModule } from '@angular/core';

import { IonicPageModule } from 'ionic-angular';

import { LessonDetailsPage } from './lesson-details';

import { Ionic2RatingModule } from 'ionic2-rating';


@NgModule({

  declarations: [

    LessonDetailsPage,

  ],

  imports: [

    IonicPageModule.forChild(LessonDetailsPage),Ionic2RatingModule

  ],

})

export class LessonDetailsPageModule {}

C:/Users/cc/Eklavya1/src/pages/lessons/lessons.module.ts

import { LessonsPage } from './lessons';

import { Ionic2RatingModule } from 'ionic2-rating';

@NgModule({


lesson.module.ts-->

import { NgModule } from '@angular/core';

import { IonicPageModule } from 'ionic-angular';

import { LessonsPage } from './lessons';

import { Ionic2RatingModule } from 'ionic2-rating';

@NgModule({

  declarations: [

    LessonsPage,

  ],

  imports: [

    IonicPageModule.forChild(LessonsPage),Ionic2RatingModule

  ],

})

export class LessonsPageModule {}

找不到模块“@ionic-native/camera”。

C:/Users/cc/Eklavya1/src/pages/profile/profile.ts

import { NavController, ActionSheetController } from 'ionic-angular';

import { Camera, CameraOptions } from '@ionic-native/camera'; 


profile.ts-->

import { Component } from '@angular/core';

import { IonicPage, NavController, ActionSheetController } from 'ionic-angular';

import { Camera, CameraOptions } from '@ionic-native/camera'; 


@IonicPage()

@Component({

  selector: 'page-profile',

  templateUrl: 'profile.html',

})

export class ProfilePage {

  name="Adam G Smith";

  current_job="Assistant Professor of Science";

  email="Adam.g@gmail.com";


  address="2 Floor,Building 4";

  phone="91234 56789";

  code='1';

  password="123456789";

  jobs="Assistant Professor of Science 2011 \n,Professor of Physics 2009 
\n,Assistant Professor of Science 2011 \n,Professor of Physics 2009";


  flag=true;

  btn_text='Update';

  btn_color="color1";

  img='assets/img/profile.png';


  constructor(public navCtrl: NavController, public actionSheetCtrl: ActionSheetController, public camera: Camera) {

  } 


  ionViewDidLoad() {

    console.log('ionViewDidLoad ProfilePage');

  }


  update(){

    if(this.flag==false){

      this.flag =true;

      this.btn_text="Update";

      this.btn_color="color1";
    }      


    else{

      this.flag =false;

      this.btn_text="Save";

      this.btn_color="color2";

    }

  }

  // gallery 

  // ActionSheet for change user picture

    selectImage() {

      let actionSheet = this.actionSheetCtrl.create({

        title: 'Modify your Picture',

        buttons: [

          {
            text: 'Gallery',
            handler: () => {this.get_camera(1);}
          },{
            text: 'Camera',
            handler: () => {this.get_camera(2);}
          },{
            text: 'Cancel',
            role: 'cancel',
            handler: () => {}
          }
        ]
      });
      actionSheet.present();
    }
  get_camera(source) {
      const options: CameraOptions = { quality: 100,destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE
      ,allowEdit:true,targetWidth:512,targetHeight:512,correctOrientation:true}

      if(source==1){
        options.sourceType= this.camera.PictureSourceType.PHOTOLIBRARY
      }
      else {
        options.sourceType= this.camera.PictureSourceType.CAMERA
      }

      this.camera.getPicture(options).then((imageData) => {
        this.img='data:image/jpeg;base64,' + imageData;
      }, (err) => {});

    }

}

Answer 1

显然你在 node_modules 中没有以下库：ionic2-rating & @ionic-native/camera

使用以下命令安装它们：

$ npm install --save ionic2-rating
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera