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!