Ionic Angular Upgrade 9 to 10 - Build Errors

We have been using Ionic 5 with Angular 9 in a large application. Recently we upgraded to Angular 10 and have been experiencing some issues with the Application. The issues described below only occurs on the build/production version of the app. The actual APP compiles and we can use the build version. The only thing is when accessing parts of the apps we get these errors and the app breaks.

Using the normal AOT compiler works fine hence why we are scratching our heads on what is going wrong.

I’ve checked whether rxjs/subject is being used but can confirm we are importing it correctly ie import { Subject } from ‘rxjs’;

I know this is related to Angular itself rather than Ionic but hoping if anyone else have experience similar issues when they upgraded from 9 to 10?

Errors we get are: ERROR1

ERROR TypeError: i.Subscription is not a constructor
    at new e (main.623b6f673be6bf75850a.js:1)
    at e.ɵfac [as factory] (main.623b6f673be6bf75850a.js:1)
    at Fr (main.623b6f673be6bf75850a.js:1)
    at main.623b6f673be6bf75850a.js:1
    at ki (main.623b6f673be6bf75850a.js:1)
    at Object.Io (main.623b6f673be6bf75850a.js:1)
    at ne (main.623b6f673be6bf75850a.js:1)
    at vi (main.623b6f673be6bf75850a.js:1)
    at bi (main.623b6f673be6bf75850a.js:1)
    at r.value (main.623b6f673be6bf75850a.js:1)

ERROR2

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'create' of undefined
    TypeError: Cannot read property 'create' of undefined
        at new e (9.12088e5a4e90136dc13f.js:1)
        at e.ɵfac [as factory] (9.12088e5a4e90136dc13f.js:1)
        at Fr (main.623b6f673be6bf75850a.js:1)
        at main.623b6f673be6bf75850a.js:1
        at main.623b6f673be6bf75850a.js:1
        at r.value (main.623b6f673be6bf75850a.js:1)
        at n.value (main.623b6f673be6bf75850a.js:1)
        at e.value (main.623b6f673be6bf75850a.js:1)
        at e.value (main.623b6f673be6bf75850a.js:1)
        at main.623b6f673be6bf75850a.js:1
        at T (polyfills.1a8ca51e001f8256135b.js:1)
        at T (polyfills.1a8ca51e001f8256135b.js:1)
        at polyfills.1a8ca51e001f8256135b.js:1
        at t.invokeTask (polyfills.1a8ca51e001f8256135b.js:1)
        at Object.onInvokeTask (main.623b6f673be6bf75850a.js:1)
        at t.invokeTask (polyfills.1a8ca51e001f8256135b.js:1)
        at e.runTask (polyfills.1a8ca51e001f8256135b.js:1)
        at b (polyfills.1a8ca51e001f8256135b.js:1)

For ERROR1 below is a snippet of the coding:

mport { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import * as _ from "lodash"; 
import { AlertController } from '@ionic/angular';
import { Subscription } from 'rxjs';

import { OrganisationService } from '../../../services/organisation/organisation.service'
import { OrganisationResourceService } from '../../../services/organisation/organisation-resource.service';
import { SetupService } from '../../../services/setup/setup.service';
import { ContactService } from '../../../services/contact/contact.service';
import { PrintService } from '../../../services/print/print.service';
import { PermissionService } from '../../../services/permission/permission.service';
import { DebugService } from '../../../services/debug/debug.service';
import { LoadingService } from '../../../services/loading/loading.service';
import { AlertService } from '../../../services/alert/alert.service';

import { Organisation, OrganisationSearch, OrganisationType as OrgType } from '../../../classes/organisation.class';
import { Phone, Address, ContactData } from '../../../classes/contact.class';
import { OrganisationType } from '../../../classes/setup.class';
import { Folder } from '../../../classes/document.class';
import { PermissionActions } from '../../../classes/permission.class';
@Component({
  selector: 'app-organisation-card-component',
  templateUrl: './organisation-card.component.html',
  styleUrls: ['./organisation-card.component.scss']
})
export class OrganisationCardComponent implements OnInit {
  @Input() pageId: string;
  @Input() isPage: boolean;
  //@Input() id: string;
  @Input() isLarge: boolean;
  @Input() organisationPerm: PermissionActions;
  @Input() organisationSrch: OrganisationSearch;
  @Input() innerHeight: number;
  @Input()
  set id(id:string) {
    this.checkIdChange(id)
    console.log('a updated');
  }
  @Output() onDismiss = new EventEmitter();

  subscriptionOrganisationInsert = new Subscription;
  subscriptionOrganisationId = new Subscription;
  _id: string;
  method: string;
  tab: string;
  record: Organisation;
  oldRecord: Organisation;
  data: ContactData;
  isRead: boolean;
  
  constructor(private loadingService: LoadingService, private alertCtrl: AlertController, private debugService: DebugService,
    private organisationService: OrganisationService, private organisationResourceService: OrganisationResourceService,
    private setupService: SetupService, private contactService: ContactService, private printService: PrintService,
    private permissionService: PermissionService, private alertService: AlertService) {
 
    /*
    ** name: Subscription Org Id 
    ** desc: Change Profile 
    */
    this.subscriptionOrganisationId = this.organisationService.organisationId$.subscribe((id: string)=>{      
        if (!id) {
          return;
        }
        console.log('Change Profile');
        this._id = id;
        this.fetch(this._id);
        this.method = 'get';
        this.data = null;
        this.tab = 'profile';
    })
  }

   /*
  ** name: Init
  ** desc: Set Organisation Types
  */
  ngOnInit(): void {
  }
    

  checkIdChange(id: string): void {
    if (id){
      if (this.record) {
        if (id === this.record.id) {
          return;
        }
      }
      this._id = id;   
      if (id !== '**POST**' && id !== '**POSTMODAL**') {       
        this.isRead = false;
        this.method = 'get';  
        if (this.isRead) {      
           
          setTimeout(() => {this.fetch(this._id);      
          this.method = 'get';
          this.data = null;
          });
          return;
        }   
      }
    }      
  }


  /*
  ** name: Destroy
  ** desc: Unsubscribe
  */
  ngOnDestroy(): void {
    this.subscriptionOrganisationInsert.unsubscribe();
  }
  fetch(id: string): void {
    this.organisationResourceService.getOrganisationHttp(id)
    .subscribe(
      data => {                 
        this.method = 'get';
        this.record = data;
        this.debugService.debug('organisation-card.component', 'Organisation fetched', data);
        this.tab = 'profile';    
      },
      err => {
        this.record = null;
      })
  }
}

If can at least find a solution to ERROR1 we are hoping we can figure out ERROR2. Thanks for the help!

2 posts - 2 participants

Read full topic