ionic-framework: Building errors after upgrade to Ionic 3.9.2

Ionic version: (check one with “x”) (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [ X ] 3.x [ ] 4.x

I’m submitting a … (check one with “x”) [ X ] bug report [ ] feature request

Please do not submit support requests or “How to” questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: After upgrading to Ionic 3.9.2 I get a bunch of errors when building my app:

Typescript Error
Module '"F:/Users/morit/Documents/Projects/ionic/foodji/node_modules/@angular/core/core"' has no exported member 'OpaqueToken'.
...ents/Projects/ionic/foodji/node_modules/@ionic/cloud-angular/dist/es5/index.d.ts
import { Observable } from 'rxjs';
import { ModuleWithProviders, OpaqueToken } from '@angular/core';
import { Auth as _Auth, FacebookAuth as _FacebookAuth, GoogleAuth as _GoogleAuth, Client as _Client, CloudSettings, Config as _Config, Database as _Database, Deploy as _Deploy, DIContainer as _DIContainer, IEventEmitter, IAuth, IClient, IConfig, IDeploy, IFacebookAuth, IGoogleAuth, IPush as _IPush, IPushMessage, IUser, Insights as _Insights, Push as _Push, User as _User } from '@ionic/cloud';

Typescript Error
Class 'Subject<T>' incorrectly extends base class 'Observable<T>'. Types of property 'lift' are incompatible. Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'. Type 'Observable<T>' is not assignable to type 'Observable<R>'. Type 'T' is not assignable to type 'R'.
...s/Projects/ionic/foodji/node_modules/ionic-native/node_modules/rxjs/Subject.d.ts
 */
export declare class Subject<T> extends Observable<T> implements ISubscription {
    observers: Observer<T>[];

Typescript Error
Class 'WebSocketSubject<T>' incorrectly extends base class 'AnonymousSubject<T>'. Types of property 'lift' are incompatible. Type '<R>(operator: Operator<T, R>) => WebSocketSubject<R>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<T>'. Type 'WebSocketSubject<R>' is not assignable to type 'Observable<T>'. Types of property 'operator' are incompatible. Type 'Operator<any, R>' is not assignable to type 'Operator<any, T>'. Type 'R' is not assignable to type 'T'.
...node_modules/ionic-native/node_modules/rxjs/observable/dom/WebSocketSubject.d.ts
 */
export declare class WebSocketSubject<T> extends AnonymousSubject<T> {
    url: string;

Other information: My package.json

{
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.1",
    "@angular/compiler": "5.0.1",
    "@angular/compiler-cli": "5.0.1",
    "@angular/core": "5.0.1",
    "@angular/forms": "5.0.1",
    "@angular/http": "5.0.1",
    "@angular/platform-browser": "5.0.1",
    "@angular/platform-browser-dynamic": "5.0.1",
    "@ionic-native/app-version": "^4.4.0",
    "@ionic-native/barcode-scanner": "^4.4.0",
    "@ionic-native/core": "^4.4.0",
    "@ionic-native/diagnostic": "^4.4.0",
    "@ionic-native/facebook": "^4.4.0",
    "@ionic-native/firebase": "^4.4.0",
    "@ionic-native/geolocation": "^4.4.0",
    "@ionic-native/globalization": "^4.4.0",
    "@ionic-native/intercom": "^4.4.0",
    "@ionic-native/network": "^4.4.0",
    "@ionic-native/splash-screen": "^4.4.0",
    "@ionic-native/status-bar": "^4.4.0",
    "@ionic/app-scripts": "^3.1.0",
    "@ionic/cli-plugin-cordova": "^1.4.0",
    "@ionic/cli-plugin-ionic-angular": "^1.3.1",
    "@ionic/cloud-angular": "^0.12.0",
    "@ionic/storage": "^2.1.3",
    "@ngx-translate/core": "^8.0.0",
    "@ngx-translate/http-loader": "2.0.0",
    "@types/crypto-js": "^3.1.35",
    "@types/node": "^8.0.50",
    "angular-cc-library": "^1.1.0",
    "angular2-jwt": "^0.2.3",
    "angular2-text-mask": "^8.0.3",
    "angular2-uuid": "^1.1.1",
    "auth0-js": "^8.11.2",
    "cordova-android": "~6.4.0",
    "cordova-browser": "~5.0.1",
    "cordova-ios": "^4.5.3",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-compat": "^1.1.0",
    "cordova-plugin-console": "^1.0.7",
    "cordova-plugin-device": "^1.1.6",
    "cordova-plugin-facebook4": "^1.9.1",
    "cordova-plugin-fcm": "^2.1.2",
    "cordova-plugin-geolocation": "^2.4.3",
    "cordova-plugin-globalization": "^1.0.7",
    "cordova-plugin-inappbrowser": "~1.7.1",
    "cordova-plugin-intercom": "^4.1.0",
    "cordova-plugin-multidex": "^0.1.4",
    "cordova-plugin-network-information": "^1.3.3",
    "cordova-plugin-splashscreen": "~4.0.3",
    "cordova-plugin-statusbar": "^2.2.3",
    "cordova-plugin-whitelist": "^1.3.2",
    "cordova.plugins.diagnostic": "^3.7.1",
    "crypto-js": "^3.1.9-1",
    "iban": "0.0.8",
    "ionic-angular": "^3.9.2",
    "ionic-plugin-deploy": "^0.6.7",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "3.0.0",
    "moment": "^2.18.1",
    "ng2-validation": "^4.2.0",
    "phonegap-plugin-barcodescanner": "^7.0.0",
    "raven-js": "^3.17.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "^3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.1.0",
    "@types/auth0": "^3.0.0",
    "@types/crypto-js": "^3.1.33",
    "@types/iban": "^0.0.29",
    "@types/node": "^8.0.19",
    "typescript": "2.4.2"
  },
  "version": "7.0.1",
  "cordova": {
    "plugins": {
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-globalization": {},
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": " "
      },
      "phonegap-plugin-barcodescanner": {
        "CAMERA_USAGE_DESCRIPTION": " "
      },
      "ionic-plugin-deploy": {},
      "cordova-plugin-intercom": {},
      "cordova-plugin-facebook4": {},
      "cordova-plugin-app-version": {},
      "cordova.plugins.diagnostic": {},
      "cordova-plugin-multidex": {},
      "cordova-plugin-fcm": {}
    },
    "platforms": [
      "android",
      "browser",
      "ios"
    ]
  }
}

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (C:\Users\morit\AppData\Roaming\nvm\v6.9.5\node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.0
    Cordova Platforms  : android 6.3.0 browser 5.0.1 ios 4.5.2
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v6.9.5
    npm  : 4.3.0
    OS   : Windows 10

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : legacy

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 3
  • Comments: 28

Most upvoted comments

Upgrading ionic storage to 2.1.3 worked for me…

+4
karansharma27 on Mar 4, 2018

Same issue here.

+4
JanMesaric on Nov 10, 2017

@patelya22 First remove cloud angular from your code. I had to remove references and code from both my app.module.ts and my app.component.ts and then remove it from your package.json or run npm remove @ionic/cloud-angular --save (maybe save-dev)

+3
jgerstle on Jan 4, 2018

OpaqueToken is only one issue that would go wrong with your Ionic3,8/Angular 4.x code accidentally upgraded to 3.9x/Angular5.x there is much more. I strongly advice not to upgrade to Ionic3.9.x on your production sites/apps unless you have a spare week or so. There are hundreds boobytraps like totaly new i18n system, new rxjs, new form behavior, etc. CLI MUST NOT offer upgrades that requires major overhaul of the whole project codebase!!!

+3
adyba on Nov 13, 2017

As @selected-pixel-jameson mentioned I had to update ngx-translate as well to the latest version(currently to 9.1.1), in the package.json:

        "@ngx-translate/core": "9.1.1",
        "@ngx-translate/http-loader": "2.0.1",

and update the translate loader from:

export function HttpLoaderFactory(http: http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

to

export function HttpLoaderFactory(http: **HttpClient**) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

Imports;

import { HttpModule } from '@angular/http';
import {HttpClientModule, HttpClient} from '@angular/common/http';

and imports module section:

imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }), 
...
+1
dlaraf on Feb 12, 2018

I had to update the ngx-translate/core to the latest version to get around an issue with the opaqueToken module.

+1
selected-pixel-jameson on Jan 3, 2018

downgrading has other issues

npm WARN @angular/compiler-cli@5.0.0 requires a peer of typescript@>=2.4.2 <2.5 but none was installed.
npm WARN tsickle@0.24.1 requires a peer of typescript@2.4.2 but none was installed.
+1
minusf on Dec 1, 2017

Downgrade Typescript to 2.4.0, worked for me

+1
Danite on Nov 14, 2017
Read more comments on GitHub
← ionic-framework: Build tools trying to access the incorrect path for the Android Manifest
ionic-framework: Button inside input does not trigger ng-click →