Photoviewer App

Introduction

I had real problems getting "Ionic-Angular-Usage" and 'angular-photoviewer-app' to work with Ionic 8/Angular 18, ie the latest :

$ ionic start <project_name> tabs --type=angular --capacitor

partly this was a tabs/photoviewer Router issue and partly it was an Angular 15 to 18 issue (since 'angular-photoviewer-app' uses Angular 15).

The final solution was to copy 'angular-photoviewer-app/src' into a template generated Ionic/Angular/Capacitor "Tabs" project and keep solving the first error reported by :

$ ionic serve

Install

$ git clone https://github.com/doughazell/photoviewer.git
$ cd photoviewer
photoviewer$ npm install

photoviewer$ ionic serve
photoviewer$ ionic cap sync
photoviewer$ ionic cap open android

Change App permissions

If you want Photoviewer to display images outside of the App (eg "DCIM/Screenshots") then you need to change the Android App Permissions :

Android_Settings_Apps_<app name ie "photoviewer">_Permissions_Storage ON

This is in addition to the permissions allocated in AndroidManifest.xml :

android/app/src/main/AndroidManifest.xml

  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Debug

Angular 18 uses cache by default (Angular 16: "Esbuild-based build system for development servers.") so editing JS files in 'node_modules' DOES NOT CHANGE the version used by "$ ionic serve". This can be changed with :

photoviewer$ vi angular.json
  ...
  "cli": {
    ... ,
    "cache": {
      "enabled": false
    }
  },
  ...

Android Studio Gradle cfg

Follow "Android" section in 'photoviewer' npm in order to compile the Android project generated by :

photoviewer$ ionic cap sync
photoviewer$ ionic cap open android

NOTE: The repo already contains the necessary Android Studio Gradle cfg in 'android' directory (and this is just a record of the steps taken in creating it)

Unrequired packages

'photoviewer' npm states, "The plugin works with the companion Stencil component jeep-photoviewer. It is mandatory to install it".

This is incorrect and the following packages ARE NOT REQUIRED with Ionic 8/Angular 18/Capacitor 6 :

photoviewer$ npm install jeep-photoviewer
photoviewer$ npm install @ionic/pwa-elements

Commands used to create 'photoviewer' repo

temp$ ionic start photoviewer tabs --type=angular --capacitor
temp$ cd photoviewer
photoviewer$ npm install @capacitor-community/photoviewer
photoviewer$ npm install @capacitor/toast

Files changed from 'angular-photoviewer-app/src'

src/app/app-routing.module.ts

{
  path: '',
  loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
},

{
  path: 'viewer/:mode',
  loadChildren: () => import('./tab1/viewer/viewer.module').then( m => m.ViewerPageModule)
}

src/app/tabs/tabs-routing.module.ts

{
  path: 'tab1',
  loadChildren: () => import('../tab1/home/home.module').then( m => m.HomePageModule)
},

src/app/tab1/viewer/viewer.page.ts

@Component({
  template: '<div id="photo-container"><app-photoviewer (pvExit)="handleExit($event)" [imageList]="imageList" [mode]="mode" [startFrom]="startFrom"></app-photoviewer></div>',
  ...
})

constructor(private router: Router,
            private actRoute: ActivatedRoute) {

  //this.mode = this.actRoute.snapshot.params.mode;
  this.mode = this.actRoute.snapshot.params['mode'];
  this.startFrom = 0;
}

handleExit(ev: any){
  ...
  this.router.navigateByUrl('/tabs/tab1');
}

src/app/tab1/components/photoviewer/photoviewer.component.ts

@Component({
  selector: 'app-photoviewer',
  template: '<div id="photoviewer-container"></div>'
})

...catch (err: any)