The Bluetooth Serial plugin doesn’t support multiple connections, see https://github.com/don/BluetoothSerial/issues/58

In case you’re doing Bluetooth Low Energy, there are plugins that support multiple connections:

• GitHub - capacitor-community/bluetooth-le: Capacitor plugin for Bluetooth Low Energy for Capacitor
• Ionic Native - BLE or Ionic Native - BluetoothLE for Cordova

I’m trying to setup Jest test framework into my project which use Angular 14 and Ionic 6, among other plugins which may be conflictive such as firebase and ngrx.

I’ve been following mainly this Tim Deschryver tutorial and some other, even copying and pasting some code from stack overflow about my Jest testing errors, but nothing works. Even I tried a fresh begin removing all my packages and modifications and starting again, but with no luck.

I have my updated repo in here GitHub - neil89/igloo (it’s pretty manageable). But as a summary, my main modifications have been these:

package.json

{
  "name": "igloo",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "jest",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/fire": "^7.4.1",
    "@angular/forms": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "@briebug/jest": "^1.3.1",
    "@ionic/angular": "^6.2.6",
    "@ngrx/effects": "^14.3.1",
    "@ngrx/store": "^14.3.1",
    "firebase": "^9.9.4",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.0",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/compiler-cli": "^14.0.0",
    "@angular/language-service": "^14.0.0",
    "@types/jest": "^29.0.1",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jest": "^28.1.3",
    "jest-preset-angular": "^12.2.2",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.7.3"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupJest.ts"
    ],
    "globalSetup": "jest-preset-angular/global-setup"
  },
  "description": "An Ionic project"
}

jest.config.js

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.spec.json',
      isolatedModules: true,
    },
  },
  moduleNameMapper: {
    '@angular/compiler-cli/ngcc': '<rootDir>/node_modules/@angular/compiler-cli/bundles/ngcc/main-ngcc.js',
  },
  testEnvironment: 'jsdom',
  modulePathIgnorePatterns: ['examples/.*', 'website/.*'],
  snapshotSerializers: [require.resolve('jest-snapshot-serializer-raw')],
  testPathIgnorePatterns: ['/node_modules/', '/examples/', '/e2e/.*/__tests__', '\\.snap

setupJest.ts

import 'jest-preset-angular';

One of my simpler failing tests: app.component.spec.ts

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        RouterTestingModule.withRoutes([])
      ],
    }).compileComponents();
  });

  it('should create the app', (() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it('should have menu labels', (() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const app = fixture.nativeElement;
    const menuItems = app.querySelectorAll('ion-label');
    expect(menuItems.length).toEqual(7);
    expect(menuItems[0].textContent).toContain('Inbox');
    expect(menuItems[1].textContent).toContain('Outbox');
  }));

  it('should have urls', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const app = fixture.nativeElement;
    const menuItems = app.querySelectorAll('ion-item');
    expect(menuItems.length).toEqual(7);
    expect(menuItems[0].getAttribute('ng-reflect-router-link')).toEqual('/folder/Inbox');
    expect(menuItems[1].getAttribute('ng-reflect-router-link')).toEqual('/folder/Outbox');
  });

});

And now, my output when I ran npm test is next:

> igloo@0.0.1 test
> jest

Determining test suites to run...
ngcc-jest-processor: running ngcc
 FAIL  src/app/fridge/fridge.service.spec.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/daniel.rodriguez/Documents/Personal/iGloo/igloo/node_modules/firebase/app/dist/index.esm.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { registerVersion } from '@firebase/app';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1796:14)
      at node_modules/@angular/fire/bundles/angular-fire.umd.js:2:111
      at Object.<anonymous> (node_modules/@angular/fire/bundles/angular-fire.umd.js:5:2)

 FAIL  src/app/fridge/fridge.component.spec.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/daniel.rodriguez/Documents/Personal/iGloo/igloo/node_modules/firebase/app/dist/index.esm.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { registerVersion } from '@firebase/app';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1796:14)
      at node_modules/@angular/fire/bundles/angular-fire.umd.js:2:111
      at Object.<anonymous> (node_modules/@angular/fire/bundles/angular-fire.umd.js:5:2)

 FAIL  src/app/folder/folder.page.spec.ts
  ● FolderPage › should create

    Need to call TestBed.initTestEnvironment() first

       9 |
      10 |   beforeEach(async () => {
    > 11 |     await TestBed.configureTestingModule({
         |                   ^
      12 |       declarations: [ FolderPage ],
      13 |       imports: [IonicModule.forRoot(), RouterModule.forRoot([])]
      14 |     }).compileComponents();

      at TestBedRender3.get compiler [as compiler] (node_modules/@angular/core/fesm2020/testing.mjs:26367:19)
      at TestBedRender3.configureTestingModule (node_modules/@angular/core/fesm2020/testing.mjs:26290:14)
      at Function.configureTestingModule (node_modules/@angular/core/fesm2020/testing.mjs:26126:30)
      at src/app/folder/folder.page.spec.ts:11:19
      at node_modules/tslib/tslib.js:118:75
      at Object.__awaiter (node_modules/tslib/tslib.js:114:16)
      at Object.<anonymous> (src/app/folder/folder.page.spec.ts:10:25)

  ● FolderPage › should create

    zone-testing.js is needed for the fakeAsync() test helper but could not be found.
            Please make sure that your environment includes zone.js/testing

      at resetFakeAsyncZone (node_modules/@angular/core/fesm2020/testing.mjs:273:11)
      at Object.<anonymous> (node_modules/@angular/core/fesm2020/testing.mjs:26603:13)

 FAIL  src/app/app.component.spec.ts
  ● AppComponent › should create the app

    Need to call TestBed.initTestEnvironment() first

       7 |
       8 |   beforeEach(async () => {
    >  9 |     await TestBed.configureTestingModule({
         |                   ^
      10 |       declarations: [
      11 |         AppComponent
      12 |       ],

      at TestBedRender3.get compiler [as compiler] (node_modules/@angular/core/fesm2020/testing.mjs:26367:19)
      at TestBedRender3.configureTestingModule (node_modules/@angular/core/fesm2020/testing.mjs:26290:14)
      at Function.configureTestingModule (node_modules/@angular/core/fesm2020/testing.mjs:26126:30)
      at src/app/app.component.spec.ts:9:19
      at node_modules/tslib/tslib.js:118:75
      at Object.__awaiter (node_modules/tslib/tslib.js:114:16)
      at Object.<anonymous> (src/app/app.component.spec.ts:8:25)

  ● AppComponent › should create the app

    zone-testing.js is needed for the fakeAsync() test helper but could not be found.
            Please make sure that your environment includes zone.js/testing

      at resetFakeAsyncZone (node_modules/@angular/core/fesm2020/testing.mjs:273:11)
      at Object.<anonymous> (node_modules/@angular/core/fesm2020/testing.mjs:26603:13)

  ● AppComponent › should have menu labels

    NG0908: In this configuration Angular requires Zone.js

      25 |
      26 |   it('should have menu labels', (() => {
    > 27 |     const fixture = TestBed.createComponent(AppComponent);
         |                             ^
      28 |     fixture.detectChanges();
      29 |     const app = fixture.nativeElement;
      30 |     const menuItems = app.querySelectorAll('ion-label');

      at new NgZone (node_modules/@angular/core/fesm2020/core.mjs:26180:19)
      at R3TestBedCompiler.compileTestModule (node_modules/@angular/core/fesm2020/testing.mjs:25851:24)
      at R3TestBedCompiler.finalize (node_modules/@angular/core/fesm2020/testing.mjs:25419:14)
      at TestBedRender3.get testModuleRef [as testModuleRef] (node_modules/@angular/core/fesm2020/testing.mjs:26377:49)
      at TestBedRender3.inject (node_modules/@angular/core/fesm2020/testing.mjs:26300:29)
      at TestBedRender3.createComponent (node_modules/@angular/core/fesm2020/testing.mjs:26340:44)
      at Function.createComponent (node_modules/@angular/core/fesm2020/testing.mjs:26179:37)
      at Object.<anonymous> (src/app/app.component.spec.ts:27:29)

  ● AppComponent › should have menu labels

    zone-testing.js is needed for the fakeAsync() test helper but could not be found.
            Please make sure that your environment includes zone.js/testing

      at resetFakeAsyncZone (node_modules/@angular/core/fesm2020/testing.mjs:273:11)
      at Object.<anonymous> (node_modules/@angular/core/fesm2020/testing.mjs:26603:13)

  ● AppComponent › should have urls

    NG0908: In this configuration Angular requires Zone.js

      35 |
      36 |   it('should have urls', () => {
    > 37 |     const fixture = TestBed.createComponent(AppComponent);
         |                             ^
      38 |     fixture.detectChanges();
      39 |     const app = fixture.nativeElement;
      40 |     const menuItems = app.querySelectorAll('ion-item');

      at new NgZone (node_modules/@angular/core/fesm2020/core.mjs:26180:19)
      at R3TestBedCompiler.compileTestModule (node_modules/@angular/core/fesm2020/testing.mjs:25851:24)
      at R3TestBedCompiler.finalize (node_modules/@angular/core/fesm2020/testing.mjs:25419:14)
      at TestBedRender3.get testModuleRef [as testModuleRef] (node_modules/@angular/core/fesm2020/testing.mjs:26377:49)
      at TestBedRender3.inject (node_modules/@angular/core/fesm2020/testing.mjs:26300:29)
      at TestBedRender3.createComponent (node_modules/@angular/core/fesm2020/testing.mjs:26340:44)
      at Function.createComponent (node_modules/@angular/core/fesm2020/testing.mjs:26179:37)
      at Object.<anonymous> (src/app/app.component.spec.ts:37:29)

  ● AppComponent › should have urls

    zone-testing.js is needed for the fakeAsync() test helper but could not be found.
            Please make sure that your environment includes zone.js/testing

      at resetFakeAsyncZone (node_modules/@angular/core/fesm2020/testing.mjs:273:11)
      at Object.<anonymous> (node_modules/@angular/core/fesm2020/testing.mjs:26603:13)

Test Suites: 4 failed, 4 total
Tests:       4 failed, 4 total
Snapshots:   0 total
Time:        1.861 s, estimated 2 s
Ran all test suites.

I’d appreciate any help on this, for sure there is something unconfigured or uninitialized. Thanks!

Working well with Ionic LocationStrategy provider for app.module.ts as described here

Build your Ionic sources with ionic build --prod, and serve the generated www folder with NGINX.

NGINX default.conf configuration example :

 server {
    ...
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files /index.html =404;
    }
    ...

NGINX’s try_files directive will do the job with Ionic PWA routing. Page refresh with F5 will not display 404 anymore

I have an app developed in Ionic 5. When I navigate between screens and return, this screen is deleted from the DOM and when I re-enter it, it calls the constructor again and the state it had is deleted.

How can I maintain the state of the variables and the page in general no matter how I navigate in the application?

In general the OP is not referring to Angular - so I wonder why this is relevant here?
look at the title

Re 1 - your link says the opposite and angular lifecycle hooks arent disabled by ionic.
My link says nothing about parent child components and specifically says about ngOninit
“Fired once during component initialization”. Which means it isn’t fired more than once, as it is in angular.

I wonder why you say one needs to code all sorts of stuff in ionViewillEnter?
you would need to use ionic lifecycle hooks, for the same reasons you would normally using ngOninit

Re 2 - what do you mean by angular templates?
like the ones in themeforest

both are correct, thanks for your detailed reply

I’m trying command “ionic start eport blank --type vue” and “ionic serve”.

Instead of app starting I will get error.
Is there anything I can do?

ERROR:
Build finished at 20:56:47 by 0.000s
[vue-cli-service] [eslint] Must use import to load ES Module: C:\Users\pekka\Coding\eportkassa_v6\eport\node_modules@eslint\eslintrc\universal.js
[vue-cli-service] require() of ES modules is not supported.
[vue-cli-service] require() of C:\Users\pekka\Coding\eportkassa_v6\eport\node_modules@eslint\eslintrc\universal.js from C:\Users\pekka\Coding\eportkassa_v6\eport\node_modules\eslint\lib\linter\linter.js is an ES module file as it is a .js file whose nearest parent package.json contains “type”: “module” which defines all .js files in that package scope as ES modules.
[vue-cli-service] Instead rename universal.js to end in .cjs, change the requiring code to use import(), or remove “type”: “module” from C:\Users\pekka\Coding\eportkassa_v6\eport\node_modules@eslint\eslintrc\package.json.
[vue-cli-service] You may use special comments to disable some warnings.
[vue-cli-service] Use // eslint-disable-next-line to ignore the next line.
[vue-cli-service] Use /* eslint-disable */ to ignore all warnings in a file.
[vue-cli-service] Error: Child compilation failed:
[vue-cli-service] [eslint] Must use import to load ES Module: C:\Users\pekka\Coding\eportkassa_v 6\eport\node_modules@eslint\eslintrc\universal.js
[vue-cli-service] require() of ES modules is not supported.
[vue-cli-service] require() of C:\Users\pekka\Coding\eportkassa_v6\eport\node_modules@eslint\es lintrc\universal.js from C:\Users\pekka\Coding\eportkassa_v6\eport\node_module s\eslint\lib\linter\linter.js is an ES module file as it is a .js file whose n earest parent package.json contains “type”: “module” which defines all .js fil es in that package scope as ES modules.
[vue-cli-service] Instead rename universal.js to end in .cjs, change the requiring code to use i mport(), or remove “type”: “module” from C:\Users\pekka\Coding\eportkassa_v6\e port\node_modules@eslint\eslintrc\package.json.
[vue-cli-service]
[vue-cli-service] - child-compiler.js:169
[vue-cli-service] [eport]/[html-webpack-plugin]/lib/child-compiler.js:169:18
[vue-cli-service]
[vue-cli-service] - Compiler.js:551 finalCallback
[vue-cli-service] [eport]/[webpack]/lib/Compiler.js:551:5
[vue-cli-service]
[vue-cli-service] - Compiler.js:577
[vue-cli-service] [eport]/[webpack]/lib/Compiler.js:577:11
[vue-cli-service]
[vue-cli-service] - Compiler.js:1196
[vue-cli-service] [eport]/[webpack]/lib/Compiler.js:1196:17
[vue-cli-service]
[vue-cli-service]
[vue-cli-service] - task_queues.js:97 processTicksAndRejections
[vue-cli-service] internal/process/task_queues.js:97:5
[vue-cli-service]
[vue-cli-service] - task_queues.js:66 runNextTicks
[vue-cli-service] internal/process/task_queues.js:66:3
[vue-cli-service]
[vue-cli-service] - timers.js:429 processImmediate
[vue-cli-service] internal/timers.js:429:9
[vue-cli-service]
ERROR in [eslint] Must use import to load ES Module: C:\Users\pekka\Coding\eportkassa_v6\eport\node_modules@eslint\eslintrc\universal.js
[vue-cli-service] require() of ES modules is not supported.
[vue-cli-service] require() of C:\Users\pekka\Coding\eportkassa_v6\eport\node_modules@eslint\eslintrc\universal.js from C:\Users\pekka\Coding\eportkassa_v6\eport\node_modules\eslint\lib\linter\linter.js is an ES module file as it is a .js file whose nearest parent package.json contains “type”: “module” which defines all .js files in that package scope as ES modules.
[vue-cli-service] Instead rename universal.js to end in .cjs, change the requiring code to use import(), or remove “type”: “module” from C:\Users\pekka\Coding\eportkassa_v6\eport\node_modules@eslint\eslintrc\package.json.
[vue-cli-service]
[vue-cli-service] ERROR in Error: Child compilation failed:
[vue-cli-service] [eslint] Must use import to load ES Module: C:\Users\pekka\Coding\eportkassa_v 6\eport\node_modules@eslint\eslintrc\universal.js
[vue-cli-service] require() of ES modules is not supported.
[vue-cli-service] require() of C:\Users\pekka\Coding\eportkassa_v6\eport\node_modules@eslint\es lintrc\universal.js from C:\Users\pekka\Coding\eportkassa_v6\eport\node_module s\eslint\lib\linter\linter.js is an ES module file as it is a .js file whose n earest parent package.json contains “type”: “module” which defines all .js fil es in that package scope as ES modules.
[vue-cli-service] Instead rename universal.js to end in .cjs, change the requiring code to use i mport(), or remove “type”: “module” from C:\Users\pekka\Coding\eportkassa_v6\e port\node_modules@eslint\eslintrc\package.json.
[vue-cli-service]
[vue-cli-service] - child-compiler.js:169
[vue-cli-service] [eport]/[html-webpack-plugin]/lib/child-compiler.js:169:18
[vue-cli-service]
[vue-cli-service] - Compiler.js:551 finalCallback
[vue-cli-service] [eport]/[webpack]/lib/Compiler.js:551:5
[vue-cli-service]
[vue-cli-service] - Compiler.js:577
[vue-cli-service] [eport]/[webpack]/lib/Compiler.js:577:11
[vue-cli-service]
[vue-cli-service] - Compiler.js:1196
[vue-cli-service] [eport]/[webpack]/lib/Compiler.js:1196:17
[vue-cli-service]
[vue-cli-service]
[vue-cli-service] - task_queues.js:97 processTicksAndRejections
[vue-cli-service] internal/process/task_queues.js:97:5
[vue-cli-service]
[vue-cli-service] - task_queues.js:66 runNextTicks
[vue-cli-service] internal/process/task_queues.js:66:3
[vue-cli-service]
[vue-cli-service] - timers.js:429 processImmediate
[vue-cli-service] internal/timers.js:429:9
[vue-cli-service]
[vue-cli-service]
[vue-cli-service] 1 ERROR in child compilations (Use ‘stats.children: true’ resp. ‘–stats-children’ for more details)
[vue-cli-service] webpack compiled with 3 errors

[INFO] Development server running!

   Local: http://localhost:8100

   Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

I’ve migrated an app from Ionic v4 to v6. It has various Capacitor and Cordova dependencies, and uses Angular 14 now. All seems to be well except for one issue. The basic flow is user logs in/auths with JWT to a server and stores a token. Then app goes to it’s main page. User does their thing and maybe leaves the app for a couple days. Prior to migration, when I would open the app back up, it would go back to the login page in which case would validate the token and proceed. That all used to work as expected. However, now the app just stays at whatever page it was on when the user left the app (sitting in the background for a day let’s say). Everything is fine if it’s just a couple hours but leave it for a day and the data is gone. At that point all of the local data has disappeared and the constructor for that particular page seems to be called again. The page has no data cached and shows more or less blank (because all the data is in storage, grabbed from services, or passed into the page under normal circumstances).

Example: I leave the app on PageC and open it the next day. It needs the data passed from PageB (think detailed view of PageB) to display but it’s not there. What should happen is a full reload back to Login.

/Login → /MainPage → /PageB → /PageC

What causes an Ionic app to restart versus maintain some sort of state in the background? I could post code but don’t know what to, before any commentary. The routing is very basic all preloaded. Is there something new in Angular that’s missing?

I am building an app in angular ionic and i have just added an android project. I also added some api to retrieve some data. I can see the data in the browser, however when i start the android app with capacitor, i cannot see the data. any ideas why?

I wonder if you are seeing something similar (ish) to what I’m seeing with certain devices Difference between normal iOS app startup and O/S forced startup?

Hmmm…sure sounds in the same ballpark!

is your issue similar to this?

Similar but the reverse I suppose. I want the app to “die out” after a while so the app can go through its automatic auth steps. Otherwise there’s a chance the user is going to try and push data with an invalid token, which I have hooks for but would rather avoid in the normal flow.

I just looked quick and I interestingly enough show android:launchMode=“singleTask” on this app. That said, I haven’t even gotten to testing this leave it a long time issue on Android, this appears on iOS for sure though.

FWIW, I made a start building it with Ionic but found the Ionic components and layout system too much work to ‘undo’ for my purposes. I would definitely use it for something with more of a standard UI though.

It’s subjective but Angular is working great for me, and of course capacitor does what I need for device APIs and bootstrapping the Xcode project

I am going through the ionic framework demo, and I don’t understand how to find the selfies that I have taken and that it displays?

This is the code segment that contains the information about storing and retrieving the files TIA

Preferences.set({
key: this.PHOTO_STORAGE,
value: JSON.stringify(this.photos),
});
}

public async loadSaved() {
// Retrieve cached photo array data
const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
this.photos = JSON.parse(photoList.value) || ;

// Display the photo by reading into base64 format
for (let photo of this.photos) {
// Read each saved photo’s data from the Filesystem
const readFile = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
});

// Web platform only: Load the photo as base64 data
photo.webviewPath = data:image/jpeg;base64,${readFile.data};
}

There’s no ionic certification, but there is angular certification. You can take angular in hackerrank if you want then tell them that ionic is basically angular

Are you seeing your issue on all devices right now? With the current issue I have, I only seem to be seeing it in one of my test devices - an iPhone SE. On my iPhone 11 I’m not seeing it. Admittedly our issues may be different even though they are similar

Testing this on two devices at the moment - iPhone 11 and iPhone SE. The problem only seems to occur on the SE and it definitely only occurs when - on reopening the app - the app startup events occur rather than the onResume sequence. And does NOT occur if I force close the app myself and reopen it ie in this situation the startup sequence works fine, it’s only when the OS forces the startup that things start to go wrong. Very frustrating.

maybe it depends on the OS version?

(post deleted by author)