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

Posted 2023-03-13

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

【英文标题】：Runtime error when installing the prebuild theme in the ionic app

【发布时间】：2018-11-27 22:14:06

【问题描述】：

我像往常一样使用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="[e-mail]";


  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) => );

    

【问题讨论】：

您能否在运行应用程序之前尝试“npm install”。

我已经有 npm

尝试卸载旧的 ionic 并安装最新的 ionic 版本。然后尝试运行。

【参考方案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