Upgrade: Angular 18, Ionic 8, Capacitor 6

Modernizacion completa del frontend:

- Angular 8 -> 18.2.14
- Ionic 4 -> 8.7.17
- Capacitor 6.x (migracion desde Cordova/@ionic-native)
- TypeScript 5.4.5
- Swiper 11 con Web Components API

Cambios principales:
- Migrar NativeStorage a @capacitor/preferences
- Migrar InAppBrowser a @capacitor/browser
- Migrar Camera a @capacitor/camera
- Migrar Geolocation a @capacitor/geolocation
- Migrar StatusBar/SplashScreen a Capacitor
- Migrar Facebook/Google login a plugins Capacitor
- Actualizar lazy loading syntax (Angular 12+)
- Configurar buildOptimizer: false para Ionic 8
- Limpiar package.json de dependencias obsoletas
- Agregar README con guia de instalacion

Co-Authored-By: Claude <noreply@anthropic.com>

src/app/app-routing.module.ts

@@ -2,38 +2,40 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { AuthGuard } from './guard/auth.guard';
 import { AuthoriginGuard } from './guard/authorigin.guard';
+
 const routes: Routes = [
   {
     path: '',
     redirectTo: 'landing',
     pathMatch: 'full'
   },
-  { path: 'landing', loadChildren: './pages/landing/landing.module#LandingPageModule' },
-  { path: 'login', loadChildren: './pages/auth/login/login.module#LoginPageModule' },
-  { path: 'register', loadChildren: './pages/auth/register/register.module#RegisterPageModule' },
-  { path: 'forgot', loadChildren: './pages/auth/forgot/forgot.module#ForgotPageModule' },
+  { path: 'landing', loadChildren: () => import('./pages/landing/landing.module').then(m => m.LandingPageModule) },
+  { path: 'login', loadChildren: () => import('./pages/auth/login/login.module').then(m => m.LoginPageModule) },
+  { path: 'register', loadChildren: () => import('./pages/auth/register/register.module').then(m => m.RegisterPageModule) },
+  { path: 'forgot', loadChildren: () => import('./pages/auth/forgot/forgot.module').then(m => m.ForgotPageModule) },
 
-  { path: 'dashboard', loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule', canActivate: [AuthGuard] },
-  { path: 'home', loadChildren: './home/home.module#HomePageModule', canActivate: [AuthGuard] },
-  { path: 'verify', loadChildren: './verify/verify.module#verifyPageModule', canActivate: [AuthoriginGuard]},
-  { path: 'category/:category', loadChildren: './pages/category/category.module#CategoryPageModule', canActivate: [AuthGuard] },
-  { path: 'addcard', loadChildren: './pages/card/addcard/addcard.module#AddcardPageModule', canActivate: [AuthGuard] },
-  { path: 'cards', loadChildren: './pages/card/cards/cards.module#CardsPageModule', canActivate: [AuthGuard] },
-  { path: 'postulations', loadChildren: './pages/postulations/postulations.module#PostulationsPageModule', canActivate: [AuthGuard] },
-  { path: 'contracts', loadChildren: './pages/contracts/contracts.module#ContractsPageModule', canActivate: [AuthGuard] },
-  { path: 'viewsuppliers/:postulation_id', loadChildren: './pages/contracts/viewsuppliers/viewsuppliers.module#ViewsuppliersPageModule', canActivate: [AuthGuard] },
-  { path: 'hire', loadChildren: './pages/contracts/hire/hire.module#HirePageModule', canActivate: [AuthGuard] },
-  { path: 'start', loadChildren: './pages/contracts/start/start.module#StartPageModule', canActivate: [AuthGuard]},
-  { path: 'review/:contract_id', loadChildren: './pages/contracts/review/review.module#ReviewPageModule', canActivate: [AuthGuard] },
-  { path: 'report/:contract_id', loadChildren: './pages/contracts/report/report.module#ReportPageModule', canActivate: [AuthGuard] },
-  { path: 'reports', loadChildren: './pages/reports/reports.module#ReportsPageModule', canActivate: [AuthGuard]},
-  { path: 'nohome/:contract_id', loadChildren: './pages/contracts/nohome/nohome.module#NohomePageModule', canActivate: [AuthGuard] },
-  { path: 'extra', loadChildren: './pages/contracts/extra/extra.module#ExtraPageModule', canActivate: [AuthGuard] },
-  { path: 'ended', loadChildren: './pages/postulations/ended/ended.module#EndedPageModule', canActivate: [AuthGuard]  },
-  { path: 'hero', loadChildren: './pages/hero/hero.module#HeroPageModule', canActivate: [AuthGuard] },
-  { path: 'comments', loadChildren: './pages/contracts/viewsuppliers/comments/comments.module#CommentsPageModule', canActivate: [AuthGuard]  },
-  { path: 'faq', loadChildren: './pages/faq/faq.module#FaqPageModule',  canActivate: [AuthGuard]  },
+  { path: 'dashboard', loadChildren: () => import('./pages/dashboard/dashboard.module').then(m => m.DashboardPageModule), canActivate: [AuthGuard] },
+  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule), canActivate: [AuthGuard] },
+  { path: 'verify', loadChildren: () => import('./verify/verify.module').then(m => m.verifyPageModule), canActivate: [AuthoriginGuard]},
+  { path: 'category/:category', loadChildren: () => import('./pages/category/category.module').then(m => m.CategoryPageModule), canActivate: [AuthGuard] },
+  { path: 'addcard', loadChildren: () => import('./pages/card/addcard/addcard.module').then(m => m.AddcardPageModule), canActivate: [AuthGuard] },
+  { path: 'cards', loadChildren: () => import('./pages/card/cards/cards.module').then(m => m.CardsPageModule), canActivate: [AuthGuard] },
+  { path: 'postulations', loadChildren: () => import('./pages/postulations/postulations.module').then(m => m.PostulationsPageModule), canActivate: [AuthGuard] },
+  { path: 'contracts', loadChildren: () => import('./pages/contracts/contracts.module').then(m => m.ContractsPageModule), canActivate: [AuthGuard] },
+  { path: 'viewsuppliers/:postulation_id', loadChildren: () => import('./pages/contracts/viewsuppliers/viewsuppliers.module').then(m => m.ViewsuppliersPageModule), canActivate: [AuthGuard] },
+  { path: 'hire', loadChildren: () => import('./pages/contracts/hire/hire.module').then(m => m.HirePageModule), canActivate: [AuthGuard] },
+  { path: 'start', loadChildren: () => import('./pages/contracts/start/start.module').then(m => m.StartPageModule), canActivate: [AuthGuard]},
+  { path: 'review/:contract_id', loadChildren: () => import('./pages/contracts/review/review.module').then(m => m.ReviewPageModule), canActivate: [AuthGuard] },
+  { path: 'report/:contract_id', loadChildren: () => import('./pages/contracts/report/report.module').then(m => m.ReportPageModule), canActivate: [AuthGuard] },
+  { path: 'reports', loadChildren: () => import('./pages/reports/reports.module').then(m => m.ReportsPageModule), canActivate: [AuthGuard]},
+  { path: 'nohome/:contract_id', loadChildren: () => import('./pages/contracts/nohome/nohome.module').then(m => m.NohomePageModule), canActivate: [AuthGuard] },
+  { path: 'extra', loadChildren: () => import('./pages/contracts/extra/extra.module').then(m => m.ExtraPageModule), canActivate: [AuthGuard] },
+  { path: 'ended', loadChildren: () => import('./pages/postulations/ended/ended.module').then(m => m.EndedPageModule), canActivate: [AuthGuard]  },
+  { path: 'hero', loadChildren: () => import('./pages/hero/hero.module').then(m => m.HeroPageModule), canActivate: [AuthGuard] },
+  { path: 'comments', loadChildren: () => import('./pages/contracts/viewsuppliers/comments/comments.module').then(m => m.CommentsPageModule), canActivate: [AuthGuard]  },
+  { path: 'faq', loadChildren: () => import('./pages/faq/faq.module').then(m => m.FaqPageModule),  canActivate: [AuthGuard]  },
 ];
+
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]

src/app/app.component.html

@@ -1,6 +1,6 @@
 <ion-app>
-  <ion-split-pane>
-    <ion-menu>
+  <ion-split-pane contentId="main-content" when="false">
+    <ion-menu contentId="main-content">
       <ion-header>
         <ion-toolbar color="primary">
           <ion-title>Menu</ion-title>
@@ -25,6 +25,6 @@
         </ion-list>
       </ion-content>
     </ion-menu>
-    <ion-router-outlet main></ion-router-outlet>
+    <ion-router-outlet id="main-content" main></ion-router-outlet>
   </ion-split-pane>
 </ion-app>

src/app/app.component.ts

@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
-import { Platform, NavController, LoadingController, AlertController, Events } from '@ionic/angular';
-import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { Platform, NavController, LoadingController } from '@ionic/angular';
+import { EventService } from './services/event.service';
+import { StatusBar, Style } from '@capacitor/status-bar';
+import { SplashScreen } from '@capacitor/splash-screen';
+import { Browser } from '@capacitor/browser';
 import { AuthService } from './services/auth.service';
 import { LanguageService } from './services/language.service';
 import { AlertService } from './services/alert.service';
 import { TranslateService } from '@ngx-translate/core';
-import { User } from 'src/app/models/user';
-import { OneSignal, OSNotificationPayload } from '@ionic-native/onesignal/ngx';
-import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+import { Capacitor } from '@capacitor/core';
 
 @Component({
   selector: 'app-root',
@@ -16,22 +16,18 @@ import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 })
 export class AppComponent {
 
-  private loading;
+  private loading: any;
 
-  public appPages = [];
+  public appPages: any[] = [];
 
   constructor(
     private platform: Platform,
-    private splashScreen: SplashScreen,
-    private statusBar: StatusBar,
     private authService: AuthService,
     private languageService: LanguageService,
     private translateService: TranslateService,
     private navCtrl: NavController,
-    private events: Events,
+    private events: EventService,
     private alertService: AlertService,
-    private oneSignal: OneSignal,
-    private iab: InAppBrowser,
     private loadingCtrl: LoadingController,
   ) {
     this.initializeApp();
@@ -100,31 +96,31 @@ export class AppComponent {
       }
     });
   }
-  initializeApp() {
-    this.platform.ready().then(() => {
-      this.statusBar.styleLightContent();
-      this.statusBar.overlaysWebView(false);
-      // set status bar to white
-      this.statusBar.backgroundColorByHexString('#0080ff');
-      // Commenting splashScreen Hide, so it won't hide splashScreen before auth check
-      //this.splashScreen.hide();
-      this.languageService.getDefaultLanguage();
-      this.authService.getToken();
-      this.handlerNotifications();
+  async initializeApp() {
+    await this.platform.ready();
 
-    });
+    // Solo ejecutar plugins nativos en dispositivos móviles
+    if (Capacitor.isNativePlatform()) {
+      await StatusBar.setStyle({ style: Style.Light });
+      await StatusBar.setOverlaysWebView({ overlay: false });
+      await StatusBar.setBackgroundColor({ color: '#0080ff' });
+      // TODO: Implement OneSignal with Capacitor plugin
+      // this.handlerNotifications();
+    }
+
+    this.languageService.getDefaultLanguage();
+    this.authService.getToken();
   }
 
   // When Logout Button is pressed
-  logout() {
-    this.loadingCtrl.create().then((overlay) => {
-      this.loading = overlay;
-      this.loading.present();
-    });
+  async logout() {
+    this.loading = await this.loadingCtrl.create();
+    await this.loading.present();
+
     this.authService.logout().subscribe(
       data => {
         this.alertService.presentToast(this.translateService.instant('alerts.logout'));
-        this.oneSignal.sendTag("iChamba_ID", null);
+        // TODO: Implement OneSignal tag clearing with Capacitor
       },
       error => {
         this.loading.dismiss();
@@ -137,39 +133,10 @@ export class AppComponent {
     );
   }
 
-  openUrl(url) {
-    this.iab.create(url, '_system')
+  async openUrl(url: string) {
+    await Browser.open({ url });
   }
 
-  private handlerNotifications(){
-    this.oneSignal.startInit('00d23dae-1209-42cc-bea7-e1f17cee27fa', '679874302148');
-      this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.Notification);
-      this.oneSignal.handleNotificationReceived().subscribe(data => this.onPushReceived(data.payload));
-      this.oneSignal.handleNotificationOpened().subscribe(data => this.onPushOpened(data.notification.payload));
-      this.oneSignal.endInit();
-  }
-
-  private onPushReceived(payload: OSNotificationPayload) {
-  	this.alertService.presentAlert(payload.title, payload.body, ['OK']);
-    if (payload.title == 'Proveedor: hay nueva postulación' || payload.title == 'Hero: there is a new postulation') {
-      this.navCtrl.navigateRoot('/postulations');
-      this.events.publish('refreshpostulations', 'data');
-    } else if (payload.title == 'Búsqueda Finalizada' || payload.title == 'Search finished') {
-      this.navCtrl.navigateRoot('/contracts');
-    } else if (payload.title == 'Usuario: el proveedor ha iniciado el servicio' || payload.title == 'User: the Hero has started the service') {
-      this.navCtrl.navigateRoot('/contracts');
-    }
-
-  }
-
-  private onPushOpened(payload: OSNotificationPayload) {
-    if (payload.title == 'Proveedor: hay nueva postulación' || payload.title == 'Hero: there is a new postulation') {
-      this.navCtrl.navigateRoot('/postulations');
-      this.events.publish('refreshpostulations', 'data');
-    } else if (payload.title == 'Búsqueda Finalizada' || payload.title == 'Search finished') {
-      this.navCtrl.navigateRoot('/contracts');
-    } else if (payload.title == 'Usuario: el proveedor ha iniciado el servicio' || payload.title == 'User: the Hero has started the service') {
-      this.navCtrl.navigateRoot('/contracts');
-    }
-  }
+  // TODO: Re-implement push notifications with OneSignal Capacitor plugin
+  // private handlerNotifications() { ... }
 }

src/app/app.module.ts

@@ -3,30 +3,13 @@ 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 { HttpClientModule, HttpClient } from '@angular/common/http';
+import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { Camera } from '@ionic-native/Camera/ngx';
-import { File } from '@ionic-native/File/ngx';
-import { WebView } from '@ionic-native/ionic-webview/ngx';
-import { FilePath } from '@ionic-native/file-path/ngx';
-import { NativeStorage } from '@ionic-native/native-storage/ngx';
-import { Facebook, FacebookLoginResponse  } from '@ionic-native/facebook/ngx';
-import { GooglePlus } from '@ionic-native/google-plus/ngx';
-import { OneSignal } from '@ionic-native/onesignal/ngx';
-import { Geolocation } from '@ionic-native/geolocation/ngx';
-import { LocationAccuracy } from '@ionic-native/location-accuracy/ngx';
-import { GoogleMaps, Geocoder } from '@ionic-native/google-maps';
-import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 
-import { BrMaskerModule } from 'br-mask';
-import { IonicRatingModule } from 'ionic4-rating';
-import { TagInputModule } from 'ngx-chips';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 export function createTranslateLoader(http: HttpClient) {
@@ -35,12 +18,11 @@ export function createTranslateLoader(http: HttpClient) {
 
 @NgModule({
   declarations: [AppComponent],
-  entryComponents: [],
+  bootstrap: [AppComponent],
   imports: [
     BrowserModule,
     IonicModule.forRoot(),
     AppRoutingModule,
-    HttpClientModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
@@ -48,29 +30,11 @@ export function createTranslateLoader(http: HttpClient) {
         deps: [HttpClient]
       }
     }),
-    BrMaskerModule,
-    IonicRatingModule,
-    TagInputModule,
     BrowserAnimationsModule
   ],
   providers: [
-    StatusBar,
-    SplashScreen,
-    Facebook,
-    OneSignal,
-    GooglePlus,
-    Geolocation,
-    LocationAccuracy,
-    GoogleMaps,
-    Geocoder,
-    InAppBrowser,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
-    Camera,
-    File,
-    WebView,
-    FilePath,
-    NativeStorage
-  ],
-  bootstrap: [AppComponent]
+    provideHttpClient(withInterceptorsFromDi())
+  ]
 })
 export class AppModule {}

src/app/components/rating/rating.component.ts

@@ -0,0 +1,85 @@
+import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'rating',
+  template: `
+    <div class="rating-container" [class.readonly]="readonly === 'true'">
+      <ion-icon
+        *ngFor="let star of stars; let i = index"
+        [name]="i < value ? 'star' : 'star-outline'"
+        [class.selected]="i < value"
+        [class.large]="size === 'large'"
+        (click)="onStarClick(i + 1)">
+      </ion-icon>
+    </div>
+  `,
+  styles: [`
+    .rating-container {
+      display: flex;
+      justify-content: center;
+      gap: 8px;
+    }
+    ion-icon {
+      font-size: 24px;
+      color: #ffc107;
+      cursor: pointer;
+    }
+    ion-icon.large {
+      font-size: 36px;
+    }
+    ion-icon.selected {
+      color: #ffc107;
+    }
+    ion-icon:not(.selected) {
+      color: #ccc;
+    }
+    .readonly ion-icon {
+      cursor: default;
+    }
+  `],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => RatingComponent),
+      multi: true
+    }
+  ]
+})
+export class RatingComponent implements ControlValueAccessor {
+  @Input() readonly: string = 'false';
+  @Input() size: string = 'default';
+  @Input() max: number = 5;
+  @Output() rateChange = new EventEmitter<number>();
+
+  value: number = 0;
+  stars: number[] = [];
+
+  private onChange: (value: number) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  ngOnInit() {
+    this.stars = Array(this.max).fill(0);
+  }
+
+  onStarClick(rating: number) {
+    if (this.readonly !== 'true') {
+      this.value = rating;
+      this.onChange(this.value);
+      this.onTouched();
+      this.rateChange.emit(this.value);
+    }
+  }
+
+  writeValue(value: number): void {
+    this.value = value || 0;
+  }
+
+  registerOnChange(fn: (value: number) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+}

src/app/components/rating/rating.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { RatingComponent } from './rating.component';
+
+@NgModule({
+  declarations: [RatingComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule
+  ],
+  exports: [RatingComponent]
+})
+export class RatingModule {}

src/app/pages/auth/login/login.page.ts

@@ -1,12 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController, NavController, LoadingController } from '@ionic/angular';
+import { NavController, LoadingController } from '@ionic/angular';
 import { NgForm } from '@angular/forms';
 import { AuthService } from 'src/app/services/auth.service';
 import { AlertService } from 'src/app/services/alert.service';
 import { TranslateService } from '@ngx-translate/core';
-import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook/ngx';
-import { GooglePlus } from '@ionic-native/google-plus/ngx';
-import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+import { FacebookLogin, FacebookLoginResponse } from '@capacitor-community/facebook-login';
+import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
+import { Browser } from '@capacitor/browser';
 
 
 @Component({
@@ -16,17 +16,13 @@ import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 })
 export class LoginPage implements OnInit {
 
-  private loading;
+  private loading: any;
 
   constructor(
-    private modalController: ModalController,
     private authService: AuthService,
     private navCtrl: NavController,
     private alertService: AlertService,
     private translateService: TranslateService,
-    private fb: Facebook,
-    private googlePlus: GooglePlus,
-    private iab: InAppBrowser,
     private loadingCtrl: LoadingController
   ) { }
   ngOnInit() {
@@ -45,27 +41,26 @@ export class LoginPage implements OnInit {
     this.navCtrl.navigateForward('/forgot');
   }
 
-  login(form: NgForm) {
-    this.loadingCtrl.create().then((overlay) => {
-      this.loading = overlay;
-      this.loading.present();
-    });
+  async login(form: NgForm) {
+    this.loading = await this.loadingCtrl.create();
+    await this.loading.present();
+
     this.authService.login(form.value.email, form.value.password).subscribe(
       data => {
-        this.loading.dismiss();
+        if (this.loading) this.loading.dismiss();
       },
       error => {
+        if (this.loading) this.loading.dismiss();
         if (JSON.stringify(error['status']) == '401') {
-          this.loading.dismiss();
           this.alertService.presentToast(this.translateService.instant('alerts.login_error'));
         }
         else {
-          this.loading.dismiss();
           this.alertService.presentToast(this.translateService.instant('alerts.error') + error['message']);
           console.log(error);
         }
       },
       () => {
+        if (this.loading) this.loading.dismiss();
         this.dismissLogin();
         this.navCtrl.navigateRoot('/dashboard');
         this.alertService.presentToast(this.translateService.instant('alerts.login'));
@@ -73,96 +68,84 @@ export class LoginPage implements OnInit {
     );
   }
 
-  loginFacebook() {
-      this.loadingCtrl.create().then((overlay) => {
-        this.loading = overlay;
-        this.loading.present();
-      });
-      // Login with permissions
-      this.fb.login(['public_profile', 'email'])
-      .then( (res: FacebookLoginResponse) => {
+  async loginFacebook() {
+      this.loading = await this.loadingCtrl.create();
+      await this.loading.present();
 
-          // The connection was successful
-          if(res.status == "connected") {
+      try {
+        // Login with permissions
+        const result = await FacebookLogin.login({ permissions: ['public_profile', 'email'] });
 
-              // Get user ID and Token
-              var fb_id = res.authResponse.userID;
-              var fb_token = res.authResponse.accessToken;
+        if (result.accessToken) {
+          // Get user ID and Token
+          const fb_id = result.accessToken.userId;
+          const fb_token = result.accessToken.token;
 
-              console.log("ID: " + fb_id);
-              console.log("Token: " + fb_token);
+          console.log("ID: " + fb_id);
+          console.log("Token: " + fb_token);
 
-              this.authService.login_register_fb(fb_token, fb_id).subscribe(
-                data => {
-                },
-                error => {
-                  this.loading.dismiss();
-                  this.alertService.presentToast(this.translateService.instant('alerts.error') + error);
-                  console.log(error);
-                },
-                () => {
-                  this.loading.dismiss();
-                  this.dismissLogin();
-                  this.navCtrl.navigateRoot('/dashboard');
-                  this.alertService.presentToast(this.translateService.instant('alerts.login'));
-                }
-              );
-
-          }
-          // An error occurred while loging-in
-          else {
+          this.authService.login_register_fb(fb_token, fb_id).subscribe(
+            data => {
+            },
+            error => {
               this.loading.dismiss();
-              this.alertService.presentToast(this.translateService.instant('alerts.timeout_error'));
-          }
-
-      })
-      .catch((e) => {
+              this.alertService.presentToast(this.translateService.instant('alerts.error') + error);
+              console.log(error);
+            },
+            () => {
+              this.loading.dismiss();
+              this.dismissLogin();
+              this.navCtrl.navigateRoot('/dashboard');
+              this.alertService.presentToast(this.translateService.instant('alerts.login'));
+            }
+          );
+        } else {
           this.loading.dismiss();
-          this.alertService.presentToast(this.translateService.instant('alerts.error') + e);
-      });
-  }
-
-  loginGoogle() {
-    this.loadingCtrl.create().then((overlay) => {
-      this.loading = overlay;
-      this.loading.present();
-    });
-    // Login with permissions
-      this.googlePlus.login({})
-      .then(res => {
-        console.log(res);
-
-        var google_id = res.userId;
-        var google_token = res.accessToken;
-
-        console.log("ID: " + google_id);
-        console.log("Token: " + google_token);
-
-        this.authService.login_register_googlePlus(google_token, google_id).subscribe(
-          data => {
-          },
-          error => {
-            this.loading.dismiss();
-            this.alertService.presentToast(this.translateService.instant('alerts.error') + error);
-            console.log(error);
-          },
-          () => {
-            this.loading.dismiss();
-            this.dismissLogin();
-            this.navCtrl.navigateRoot('/dashboard');
-            this.alertService.presentToast(this.translateService.instant('alerts.login'));
-          }
-        );
-
-      })
-      .catch(err => {
+          this.alertService.presentToast(this.translateService.instant('alerts.timeout_error'));
+        }
+      } catch (e) {
         this.loading.dismiss();
-        this.alertService.presentToast(this.translateService.instant('alerts.error') + err);
-        console.log(err);
-      });
+        this.alertService.presentToast(this.translateService.instant('alerts.error') + e);
+      }
   }
 
-  openTerms() {
-    this.iab.create('https://jobheroapp.com/terminos-y-condiciones', '_system')
+  async loginGoogle() {
+    this.loading = await this.loadingCtrl.create();
+    await this.loading.present();
+
+    try {
+      const res = await GoogleAuth.signIn();
+      console.log(res);
+
+      const google_id = res.id;
+      const google_token = res.authentication.accessToken;
+
+      console.log("ID: " + google_id);
+      console.log("Token: " + google_token);
+
+      this.authService.login_register_googlePlus(google_token, google_id).subscribe(
+        data => {
+        },
+        error => {
+          this.loading.dismiss();
+          this.alertService.presentToast(this.translateService.instant('alerts.error') + error);
+          console.log(error);
+        },
+        () => {
+          this.loading.dismiss();
+          this.dismissLogin();
+          this.navCtrl.navigateRoot('/dashboard');
+          this.alertService.presentToast(this.translateService.instant('alerts.login'));
+        }
+      );
+    } catch (err) {
+      this.loading.dismiss();
+      this.alertService.presentToast(this.translateService.instant('alerts.error') + err);
+      console.log(err);
+    }
+  }
+
+  async openTerms() {
+    await Browser.open({ url: 'https://jobheroapp.com/terminos-y-condiciones' });
   }
 }

src/app/pages/auth/register/register.page.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController, NavController, LoadingController } from '@ionic/angular';
+import { NavController, LoadingController } from '@ionic/angular';
 import { AuthService } from 'src/app/services/auth.service';
 import { NgForm } from '@angular/forms';
 import { AlertService } from 'src/app/services/alert.service';
 import { TranslateService } from '@ngx-translate/core';
-import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+import { Browser } from '@capacitor/browser';
 
 @Component({
   selector: 'app-register',
@@ -13,16 +13,14 @@ import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 })
 export class RegisterPage implements OnInit {
 
-  loading = null;
+  loading: any = null;
   terms = false;
 
   constructor(
-    private modalController: ModalController,
     private authService: AuthService,
     private translateService: TranslateService,
     private navCtrl: NavController,
     private loadingCtrl: LoadingController,
-    private iab: InAppBrowser,
     private alertService: AlertService
   ) { }
   ngOnInit() {
@@ -87,7 +85,7 @@ export class RegisterPage implements OnInit {
 
   }
 
-  openTerms() {
-    this.iab.create('https://jobheroapp.com/terminos-y-condiciones', '_system')
+  async openTerms() {
+    await Browser.open({ url: 'https://jobheroapp.com/terminos-y-condiciones' });
   }
 }

src/app/pages/card/addcard/addcard.module.ts

@@ -5,8 +5,6 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { IonicModule } from '@ionic/angular';
 
-import { BrMaskerModule } from 'br-mask';
-
 import { AddcardPage } from './addcard.page';
 import { TranslateModule } from '@ngx-translate/core'
 
@@ -22,7 +20,6 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
-    BrMaskerModule,
     RouterModule.forChild(routes),
     TranslateModule
   ],

src/app/pages/card/addcard/addcard.page.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController, MenuController, NavController, Events, LoadingController } from '@ionic/angular';
+import { ModalController, MenuController, NavController, LoadingController } from '@ionic/angular';
+import { EventService } from '../../../services/event.service';
 import { NgForm } from '@angular/forms';
 import { EnvService } from 'src/app/services/env.service';
 import { AuthService } from 'src/app/services/auth.service';
@@ -39,7 +40,7 @@ export class AddcardPage implements OnInit {
     private translateService: TranslateService,
     private navCtrl: NavController,
     private loadingCtrl: LoadingController,
-    private events: Events,
+    private events: EventService,
     private env: EnvService,
   ) { }
 

src/app/pages/card/cards/cards.module.ts

@@ -4,7 +4,6 @@ import { FormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
 
 import { IonicModule } from '@ionic/angular';
-import { BrMaskerModule } from 'br-mask';
 
 import { CardsPage } from './cards.page';
 import { TranslateModule } from '@ngx-translate/core'
@@ -21,7 +20,6 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
-    BrMaskerModule,
     RouterModule.forChild(routes),
     TranslateModule
   ],

src/app/pages/card/cards/cards.page.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController, MenuController, NavController, Events } from '@ionic/angular';
+import { ModalController, MenuController, NavController } from '@ionic/angular';
+import { EventService } from '../../../services/event.service';
 import { EnvService } from 'src/app/services/env.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { IchambaService } from 'src/app/services/ichamba.service';
@@ -20,7 +21,7 @@ export class CardsPage implements OnInit {
       private modalController: ModalController,
       private menu: MenuController,
       private navCtrl: NavController,
-      private events: Events,
+      private events: EventService,
       private authService: AuthService,
       private alertService: AlertService,
       private ichambaService: IchambaService,

src/app/pages/category/category.module.ts

@@ -7,7 +7,6 @@ import { IonicModule } from '@ionic/angular';
 
 import { CategoryPage } from './category.page';
 import { TranslateModule } from '@ngx-translate/core'
-import { BrMaskerModule } from 'br-mask';
 
 const routes: Routes = [
   {
@@ -21,7 +20,6 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
-    BrMaskerModule,
     RouterModule.forChild(routes),
     TranslateModule
   ],

src/app/pages/category/category.page.html

@@ -50,11 +50,11 @@
   </ion-item>
   <ion-item>
     <ion-label position="fixed">{{'categories.date' | translate}}</ion-label>
-    <ion-datetime displayFormat="DD MM YYYY" [(ngModel)]="setDate" (ionChange)="changedate($event)" placeholder="{{'categories.date_placeholder' | translate}}" [min]="minyear" [max]="maxyear"></ion-datetime>
+    <ion-datetime presentation="date" [(ngModel)]="setDate" (ionChange)="changedate($event)" [min]="minyear" [max]="maxyear"></ion-datetime>
   </ion-item>
   <ion-item>
     <ion-label position="fixed">{{'categories.time' | translate}}</ion-label>
-    <ion-datetime displayFormat="hh mm a" [(ngModel)]="setHour" (ionChange)="changehour($event)" placeholder="{{'categories.time_placeholder' | translate}}"></ion-datetime>
+    <ion-datetime presentation="time" [(ngModel)]="setHour" (ionChange)="changehour($event)"></ion-datetime>
   </ion-item>
   <ion-item>
     <ion-label position="fixed">{{'categories.commentaries' | translate}}</ion-label>

src/app/pages/category/category.page.ts

@@ -1,14 +1,11 @@
 import { Component, OnInit, NgZone } from '@angular/core';
 import { NavController, LoadingController } from '@ionic/angular';
 import { ActivatedRoute } from '@angular/router';
-import { NgForm } from '@angular/forms';
 import { AuthService } from 'src/app/services/auth.service';
 import { AlertService } from 'src/app/services/alert.service';
 import { IchambaService } from 'src/app/services/ichamba.service';
-import { Geolocation } from '@ionic-native/geolocation/ngx';
-import { LocationAccuracy } from '@ionic-native/location-accuracy/ngx';
+import { Geolocation } from '@capacitor/geolocation';
 import { TranslateService } from '@ngx-translate/core';
-import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, MarkerOptions, Geocoder, GeocoderRequest, GeocoderResult } from '@ionic-native/google-maps';
 
 declare var google: any;
 
@@ -19,8 +16,8 @@ declare var google: any;
 })
 export class CategoryPage implements OnInit {
 
-  private loading;
-  category = null;
+  private loading: any;
+  category: any = null;
   //money: number = null;
   //amount: number = null;
   //amount_check = true;
@@ -47,11 +44,7 @@ export class CategoryPage implements OnInit {
     private alertService: AlertService,
     private ichambaService: IchambaService,
     private activatedRoute: ActivatedRoute,
-    private geolocation: Geolocation,
     private translateService: TranslateService,
-    private googleMaps: GoogleMaps,
-    private geocoder: Geocoder,
-    private locaccuracy: LocationAccuracy,
     private ngZone: NgZone,
     private loadingCtrl: LoadingController
   ) {
@@ -75,36 +68,44 @@ export class CategoryPage implements OnInit {
     console.log(this.maxyear);
   }
 
-  getCurrentLocation() {
-        this.locaccuracy.request(this.locaccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(() => {
-          this.geolocation.getCurrentPosition({ maximumAge: 20000, timeout: 30000, enableHighAccuracy: true }).then((resp) => {
-            console.log(resp);
-            this.myPosition = {
-              latitude: resp.coords.latitude,
-              longitude: resp.coords.longitude
-            }
-            this.doGeocode();
-          }).catch((error) => {
-            console.log(this.translateService.instant('alerts.geo_error') + error);
-          });
-        }, (error) => {
-          console.log(error);
-        });
+  async getCurrentLocation() {
+    try {
+      // Request permissions first
+      const permissionStatus = await Geolocation.checkPermissions();
+      if (permissionStatus.location !== 'granted') {
+        await Geolocation.requestPermissions();
+      }
+
+      const position = await Geolocation.getCurrentPosition({
+        enableHighAccuracy: true,
+        timeout: 30000
+      });
+
+      console.log(position);
+      this.myPosition = {
+        latitude: position.coords.latitude,
+        longitude: position.coords.longitude
+      };
+      this.doGeocode();
+    } catch (error) {
+      console.log(this.translateService.instant('alerts.geo_error') + error);
+    }
   }
 
   doGeocode() {
-   let request: GeocoderRequest = {
-     position: new LatLng(this.myPosition.latitude, this.myPosition.longitude),
-   };
-   this.geocoder.geocode(request)
-   .then((results: GeocoderResult[]) => {
-     let address = [
-       (results[0].thoroughfare || "") + " " + (results[0].subThoroughfare || ""),
-       results[0].locality
-     ].join(", ");
-     console.log("data_: ", address);
-     this.myAddress = address;
-   });
+    // Use Google Maps JavaScript API for geocoding
+    const geocoder = new google.maps.Geocoder();
+    const latlng = { lat: this.myPosition.latitude, lng: this.myPosition.longitude };
+
+    geocoder.geocode({ location: latlng }, (results: any, status: any) => {
+      this.ngZone.run(() => {
+        if (status === 'OK' && results[0]) {
+          const address = results[0].formatted_address;
+          console.log("data_: ", address);
+          this.myAddress = address;
+        }
+      });
+    });
   }
 
   /* check (ev: any) {

src/app/pages/contracts/contracted/contracted.page.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController, MenuController, NavController, Events } from '@ionic/angular';
+import { ModalController, MenuController, NavController } from '@ionic/angular';
+import { EventService } from '../../../services/event.service';
 import { EnvService } from 'src/app/services/env.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { IchambaService } from 'src/app/services/ichamba.service';
@@ -23,7 +24,7 @@ export class ContractedPage implements OnInit {
     private modalController: ModalController,
     private menu: MenuController,
     private navCtrl: NavController,
-    private events: Events,
+    private events: EventService,
     private alertController: AlertController,
     private authService: AuthService,
     private alertService: AlertService,

src/app/pages/contracts/contracts.module.ts

@@ -20,19 +20,19 @@ const routes: Routes = [
     children: [
       {
         path: 'pending',
-        loadChildren: './pending/pending.module#PendingPageModule'
+        loadChildren: () => import('./pending/pending.module').then(m => m.PendingPageModule)
       },
       {
         path: 'redated',
-        loadChildren: './redated/redated.module#RedatedPageModule'
+        loadChildren: () => import('./redated/redated.module').then(m => m.RedatedPageModule)
       },
       {
         path: 'contracted',
-        loadChildren: './contracted/contracted.module#ContractedPageModule'
+        loadChildren: () => import('./contracted/contracted.module').then(m => m.ContractedPageModule)
       },
       {
         path: 'finished',
-        loadChildren: './finished/finished.module#FinishedPageModule'
+        loadChildren: () => import('./finished/finished.module').then(m => m.FinishedPageModule)
       }
     ]
   }

src/app/pages/contracts/contracts.page.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController, MenuController, NavController, Events } from '@ionic/angular';
+import { ModalController, MenuController, NavController } from '@ionic/angular';
+import { EventService } from '../../services/event.service';
 import { EnvService } from 'src/app/services/env.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { IchambaService } from 'src/app/services/ichamba.service';
@@ -16,7 +17,7 @@ export class ContractsPage implements OnInit {
     private modalController: ModalController,
     private menu: MenuController,
     private navCtrl: NavController,
-    private events: Events,
+    private events: EventService,
     private authService: AuthService,
     private alertService: AlertService,
     private ichambaService: IchambaService,

src/app/pages/contracts/extra/extra.module.ts

@@ -7,8 +7,6 @@ import { IonicModule } from '@ionic/angular';
 
 import { ExtraPage } from './extra.page';
 
-import { BrMaskerModule } from 'br-mask';
-
 const routes: Routes = [
   {
     path: '',
@@ -21,7 +19,6 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
-    BrMaskerModule,
     RouterModule.forChild(routes)
   ],
   declarations: [ExtraPage]

src/app/pages/contracts/extra/extra.page.html

@@ -12,7 +12,7 @@
     de seguridad de la tarjeta.</p><br>
           <ion-item [class.ng-invalid]="!amount_check">
             <ion-label position="fixed">Monto</ion-label>
-            <ion-input ngModel type="tel" name="money" (ionChange)="check($event)" [brmasker]="{money: true, thousand: ',',  decimalCaracter: '.', decimal: '2'}" [class.ng-invalid]="!amount_check" placeholder="Minimo $150.00"></ion-input>
+            <ion-input ngModel type="number" name="money" (ionChange)="check($event)" [class.ng-invalid]="!amount_check" placeholder="Minimo $150.00" step="0.01" min="150"></ion-input>
           </ion-item>
           <ion-item>
             <ion-label>Tarjeta</ion-label>

src/app/pages/contracts/extra/extra.page.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController, MenuController, NavController, Events, LoadingController } from '@ionic/angular';
+import { ModalController, MenuController, NavController, LoadingController } from '@ionic/angular';
+import { EventService } from '../../../services/event.service';
 import { AddcardPage } from 'src/app/pages/card/addcard/addcard.page';
 import { ActivatedRoute } from '@angular/router';
 import { NgForm } from '@angular/forms';
@@ -36,7 +37,7 @@ export class ExtraPage implements OnInit {
     private activatedRoute: ActivatedRoute,
     private navCtrl: NavController,
     private loadingCtrl: LoadingController,
-    private events: Events,
+    private events: EventService,
     private env: EnvService,
   ) {
     this.events.subscribe('refreshcards', (data) => {

src/app/pages/contracts/finished/finished.page.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ReviewPage } from '../review/review.page';
-import { ModalController, MenuController, NavController, Events } from '@ionic/angular';
+import { ModalController, MenuController, NavController } from '@ionic/angular';
+import { EventService } from '../../../services/event.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { EnvService } from 'src/app/services/env.service';
 import { AuthService } from 'src/app/services/auth.service';
@@ -25,7 +26,7 @@ export class FinishedPage implements OnInit {
     private modalController: ModalController,
     private menu: MenuController,
     private navCtrl: NavController,
-    private events: Events,
+    private events: EventService,
     private activatedRoute: ActivatedRoute,
     private router: Router,
     private alertController: AlertController,

src/app/pages/contracts/hire/hire.page.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController, MenuController, NavController, Events, LoadingController } from '@ionic/angular';
+import { ModalController, MenuController, NavController, LoadingController } from '@ionic/angular';
+import { EventService } from '../../../services/event.service';
 import { AddcardPage } from 'src/app/pages/card/addcard/addcard.page';
 import { ActivatedRoute } from '@angular/router';
 import { NgForm } from '@angular/forms';
@@ -43,7 +44,7 @@ export class HirePage implements OnInit {
     private activatedRoute: ActivatedRoute,
     private navCtrl: NavController,
     private loadingCtrl: LoadingController,
-    private events: Events,
+    private events: EventService,
     private env: EnvService,
   ) {
     this.events.subscribe('refreshcards', (data) => {

src/app/pages/contracts/nohome/nohome.page.ts

@@ -1,12 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { NavController, LoadingController } from '@ionic/angular';
 import { ActivatedRoute } from '@angular/router';
-import { LocationAccuracy } from '@ionic-native/location-accuracy/ngx';
-import { Geolocation } from '@ionic-native/geolocation/ngx';
-import { Camera, CameraOptions, PictureSourceType } from '@ionic-native/Camera/ngx';
-import { File, FileEntry } from '@ionic-native/File/ngx';
-import { WebView } from '@ionic-native/ionic-webview/ngx';
-import { FilePath } from '@ionic-native/file-path/ngx';
+import { Geolocation } from '@capacitor/geolocation';
+import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
+import { Filesystem, Directory } from '@capacitor/filesystem';
 import { IchambaService } from 'src/app/services/ichamba.service';
 import { AlertService } from 'src/app/services/alert.service';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -18,13 +15,13 @@ import { DomSanitizer } from '@angular/platform-browser';
 })
 export class NohomePage implements OnInit {
 
-  private loading;
+  private loading: any;
 
-  storedPhoto;
-  resolvedImage = null;
-  safeImage = null;
-  contract_id = null;
-  description: string;
+  storedPhoto: any;
+  resolvedImage: any = null;
+  safeImage: any = null;
+  contract_id: any = null;
+  description: string = '';
   myPosition: any = {};
 
   constructor(
@@ -33,12 +30,6 @@ export class NohomePage implements OnInit {
     private navCtrl: NavController,
     private loadingCtrl: LoadingController,
     private activatedRoute: ActivatedRoute,
-    private locaccuracy: LocationAccuracy,
-    private geolocation: Geolocation,
-    private camera: Camera,
-    private file: File,
-    private webview: WebView,
-    private filePath: FilePath,
     private sanitizer: DomSanitizer
   ) { }
 
@@ -47,45 +38,45 @@ export class NohomePage implements OnInit {
     this.getCurrentLocation();
   }
 
-  getCurrentLocation() {
-        this.locaccuracy.request(this.locaccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(() => {
-          this.geolocation.getCurrentPosition({ maximumAge: 20000, timeout: 30000, enableHighAccuracy: true }).then((resp) => {
-            console.log(resp);
-            this.myPosition = {
-              latitude: resp.coords.latitude,
-              longitude: resp.coords.longitude
-            }
-          }).catch((error) => {
-            console.log('Error al obtener localización: ' + error);
-          });
-        }, (error) => {
-          console.log(error);
-        });
+  async getCurrentLocation() {
+    try {
+      // Request permissions first
+      const permissionStatus = await Geolocation.checkPermissions();
+      if (permissionStatus.location !== 'granted') {
+        await Geolocation.requestPermissions();
+      }
+
+      const position = await Geolocation.getCurrentPosition({
+        enableHighAccuracy: true,
+        timeout: 30000
+      });
+
+      console.log(position);
+      this.myPosition = {
+        latitude: position.coords.latitude,
+        longitude: position.coords.longitude
+      };
+    } catch (error) {
+      console.log('Error al obtener localización: ' + error);
+    }
   }
 
-  openCamera(){
-    const options: CameraOptions = {
-    quality: 100,
-    destinationType: this.camera.DestinationType.FILE_URI,
-    encodingType: this.camera.EncodingType.JPEG,
-   }
+  async openCamera() {
+    try {
+      const image = await Camera.getPhoto({
+        quality: 100,
+        resultType: CameraResultType.Uri,
+        source: CameraSource.Camera
+      });
 
-    this.camera.getPicture(options).then((tempImage) => {
-      const tempFilename = tempImage.substr(tempImage.lastIndexOf('/') + 1);
-      const tempBaseFilesystemPath = tempImage.substr(0, tempImage.lastIndexOf('/') + 1);
-      const newBaseFilesystemPath = this.file.dataDirectory;
-
-      this.file.copyFile(tempBaseFilesystemPath, tempFilename, newBaseFilesystemPath, tempFilename);
-
-      this.storedPhoto = newBaseFilesystemPath + tempFilename;
-      //this.resolvedImage = (this.webview.convertFileSrc(this.storedPhoto)).replace('http://localhost/_app_file_', '');
-      this.resolvedImage = this.webview.convertFileSrc(this.storedPhoto);
-      this.safeImage = this.sanitizer.bypassSecurityTrustUrl(this.resolvedImage);
-      this.alertService.presentToast(this.resolvedImage);
-    }, (err) => {
-       // Handle error
-       this.alertService.presentToast("error: " + err)
-    });
+      // image.webPath will contain a path that can be set as an image src
+      this.resolvedImage = image.webPath;
+      this.safeImage = this.sanitizer.bypassSecurityTrustUrl(this.resolvedImage || '');
+      this.storedPhoto = image.path;
+      this.alertService.presentToast(this.resolvedImage || 'Image captured');
+    } catch (err) {
+      this.alertService.presentToast("error: " + err);
+    }
   }
 
   send() {
@@ -98,27 +89,34 @@ export class NohomePage implements OnInit {
       });
   }
 
-  startUpload() {
-    this.file.resolveLocalFilesystemUrl(this.storedPhoto)
-        .then(entry => {
-            ( < FileEntry > entry).file(file => this.readFile(file))
-        })
-        .catch(err => {
-            this.alertService.presentToast("error: " + err)
-        });
-  }
+  async startUpload() {
+    try {
+      if (!this.storedPhoto) {
+        this.alertService.presentToast("No hay foto para subir");
+        return;
+      }
+
+      // Read the file as base64
+      const contents = await Filesystem.readFile({
+        path: this.storedPhoto
+      });
+
+      // Convert base64 to Blob
+      const byteCharacters = atob(contents.data as string);
+      const byteNumbers = new Array(byteCharacters.length);
+      for (let i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+      }
+      const byteArray = new Uint8Array(byteNumbers);
+      const blob = new Blob([byteArray], { type: 'image/jpeg' });
+
+      const formData = new FormData();
+      formData.append('file', blob, 'photo.jpg');
+      // this.uploadImageData(formData);
 
-  readFile(file: any) {
-      const reader = new FileReader();
-      reader.onload = () => {
-          const formData = new FormData();
-          const imgBlob = new Blob([reader.result], {
-              type: file.type
-          });
-          formData.append('file', imgBlob, file.name);
-          //this.uploadImageData(formData);
-      };
-      reader.readAsArrayBuffer(file);
       this.alertService.presentToast("Todo bien hasta ahora");
+    } catch (err) {
+      this.alertService.presentToast("error: " + err);
+    }
   }
 }

src/app/pages/contracts/pending/pending.page.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController, MenuController, NavController, Events } from '@ionic/angular';
+import { ModalController, MenuController, NavController } from '@ionic/angular';
+import { EventService } from '../../../services/event.service';
 import { EnvService } from 'src/app/services/env.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { IchambaService } from 'src/app/services/ichamba.service';
@@ -22,7 +23,7 @@ export class PendingPage implements OnInit {
     private modalController: ModalController,
     private menu: MenuController,
     private navCtrl: NavController,
-    private events: Events,
+    private events: EventService,
     private authService: AuthService,
     private alertService: AlertService,
     private ichambaService: IchambaService,

src/app/pages/contracts/redated/redated.page.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController, MenuController, NavController, Events } from '@ionic/angular';
+import { ModalController, MenuController, NavController } from '@ionic/angular';
+import { EventService } from '../../../services/event.service';
 import { EnvService } from 'src/app/services/env.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { IchambaService } from 'src/app/services/ichamba.service';
@@ -19,7 +20,7 @@ export class RedatedPage implements OnInit {
     private modalController: ModalController,
     private menu: MenuController,
     private navCtrl: NavController,
-    private events: Events,
+    private events: EventService,
     private authService: AuthService,
     private alertService: AlertService,
     private ichambaService: IchambaService,

src/app/pages/contracts/review/review.module.ts

@@ -2,12 +2,11 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
-import { IonicRatingModule } from "ionic4-rating";
-
 import { IonicModule } from '@ionic/angular';
 
 import { ReviewPage } from './review.page';
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateModule } from '@ngx-translate/core';
+import { RatingModule } from '../../../components/rating/rating.module';
 
 const routes: Routes = [
   {
@@ -21,9 +20,9 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
-    IonicRatingModule,
     RouterModule.forChild(routes),
-    TranslateModule
+    TranslateModule,
+    RatingModule
   ],
   declarations: [ReviewPage],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]