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)


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';
  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;
  set id(id:string) {
    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) {
        console.log('Change Profile');
        this._id = id;
        this.method = 'get'; = null; = 'profile';

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

  checkIdChange(id: string): void {
    if (id){
      if (this.record) {
        if (id === {
      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';
 = null;

  ** name: Destroy
  ** desc: Unsubscribe
  ngOnDestroy(): void {
  fetch(id: string): void {
      data => {                 
        this.method = 'get';
        this.record = data;
        this.debugService.debug('organisation-card.component', 'Organisation fetched', data); = '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!

These two lines strike me as unusual. I assume you’re trying to create dummies here, but I wonder if it’s too cute of a method. What I do in this situation (well, what I actually do is to use ngneat/until-destroy so I don’t have to manually manage subscriptions) is to declare these things as subscriptionOrganisationId ?: Subscription and then wrap the unsubscribe call with a guard to ensure subscriptionOrganisationId is truthy before bothering.

thanks for replying so promptly. I checked a stackoverflow response and seems for error the issue had been related to import of rxjs subscription given rxjs was updated to 6

import { Subscription } from 'rxjs/Subscription';

Changing to below resolved the issue:

'import { Subscription } from ‘rxjs’;`

Error 2 is still there but having a search of my code I am importing rxjs in couple areas as follows in addition still have rxjs compat. So I think may have to do with import and possibly removing dependancy on rxjs compat.

import { timeout} from "rxjs/operators";
import { TimerObservable } from 'rxjs/observable/TimerObservable';

Have you run into any of these issues?

Also thanks for the link to nbneat/until-destroy, I definitely going to use it for future components I build