iOS App unable to fetch data

Capacitor
1

Capacitor Version

Capacitor Doctor   

Latest Dependencies:

  @capacitor/cli: 5.0.5
  @capacitor/core: 5.0.5
  @capacitor/android: 5.0.5
  @capacitor/ios: 5.0.5

Installed Dependencies:

  @capacitor/cli: 5.0.5
  @capacitor/android: 5.0.5
  @capacitor/ios: 5.0.5
  @capacitor/core: 5.0.5

[error] Missing <manifest package=""> attribute in app/src/main

Platform(s)

iOS

Current Behavior

There is a bug in which my Ionic 6, Capacitor 4, Angular app is unable to retrieve data from the database on iOS. This is only the case for iOS and works perfectly fine on all other platforms. There are no errors in my project both when run in the browser on in Xcode. The issue persists both on iOS simulators and on physical iOS devices. For some reason it does work on iPadOS.

Expected Behavior

The app should fetch the data from the database on iOS just like other platforms.

Additional Context

{
  "name": "khalsa-school-app",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/fire": "^7.5.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@capacitor-community/fcm": "5.0.1",
    "@capacitor/android": "^5.0.0",
    "@capacitor/app": "^5.0.0",
    "@capacitor/core": "^5.0.0",
    "@capacitor/haptics": "^5.0.0",
    "@capacitor/ios": "^5.0.0",
    "@capacitor/keyboard": "^5.0.0",
    "@capacitor/preferences": "^5.0.0",
    "@capacitor/push-notifications": "^5.0.0",
    "@capacitor/status-bar": "^5.0.0",
    "@fortawesome/angular-fontawesome": "^0.12.1",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-regular-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@ionic/angular": "^6.1.9",
    "@ionic/pwa-elements": "^3.1.1",
    "cordova-plugin-ionic": "5.5.3",
    "date-fns": "^2.29.3",
    "ionicons": "^6.0.3",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular-eslint/builder": "^15.0.0",
    "@angular-eslint/eslint-plugin": "^15.0.0",
    "@angular-eslint/eslint-plugin-template": "^15.0.0",
    "@angular-eslint/schematics": "^15.0.0",
    "@angular-eslint/template-parser": "^15.0.0",
    "@angular/cli": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@angular/language-service": "^15.0.0",
    "@capacitor/assets": "^2.0.4",
    "@capacitor/cli": "^5.0.0",
    "@ionic/angular-toolkit": "^8.0.0",
    "@types/jasmine": "~4.0.0",
    "@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",
    "jasmine-core": "~4.3.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.8.4"
  },
  "description": "An Ionic project",
  "overrides": {
    "xml2js": "^0.5.0"
  }
}

announcements.page.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/services/data.service';



@Component({
  selector: 'app-announcement',
  templateUrl: './announcement.page.html',
  styleUrls: ['./announcement.page.scss'],
})
export class AnnouncementPage implements OnInit {

  dataList = [];
  subscription

  constructor(
    private dataService: DataService
  ) {
  }

  ngOnInit() {

    this.subscription = this.dataService.readAnnouncements().subscribe(data => {
      this.dataList = data.map(e => ({
        id: e.payload.doc.id,
        title: e.payload.doc.data()['Title'],
        data: e.payload.doc.data()['Data'],
        expanded: false
      }));
      console.log(this.dataList)
      //this.subscription.unsubscribe()
    })
    console.log(this.dataList)
  }

}

announcements.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>Announcements</ion-title>
    <ion-buttons slot="start">
      <ion-menu-button menu="MainMenu"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
<br>

  <ion-list class = 'list'>
    <ion-item-group *ngFor="let data of dataList">
      <ion-item-divider (click)="data.expanded = !data.expanded">
        <ion-label>
          <h2>{{data.title}}</h2>
        </ion-label>
        <ion-icon name="chevron-down-outline" slot="end" *ngIf="!data.expanded"></ion-icon>
        <ion-icon name="chevron-up-outline" slot="end" *ngIf="data.expanded"></ion-icon>
      </ion-item-divider>
      <div [hidden]="!data.expanded">
        <br>
        <p style="white-space: pre-wrap; margin: auto;">{{data.data}}</p>

        <br>
      </div>
    </ion-item-group>
  </ion-list>

</ion-content>

DataService:

import { Injectable, OnInit } from '@angular/core';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/compat/database';
import { AngularFirestore } from '@angular/fire/compat/firestore';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private database: AngularFirestore) { }

  readAnnouncements(){
      return this.database.collection('announcements', ref => ref.orderBy('num', 'desc').limit(5)).snapshotChanges()
  }

}