Module '" node_modules/@angular/core/index"' has no exported member 'OpaqueToken'

Shequeri · January 10, 2018, 5:36am

I have this error for a few days now but all was vain. Please do help me if you can, thanks. Below is my console;

C:\Users\Tomorow\appocalypse\QRDoors>ionic serve
Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port
35729 --dev-logger-port 53703 --nobrowser - Ctrl+C to cancel
[12:33:54]  watch started ...
[12:33:54]  build dev started ...
[12:33:54]  clean started ...
[12:33:54]  clean finished in 5 ms
[12:33:54]  copy started ...
[12:33:55]  deeplinks started ...
[12:33:55]  deeplinks finished in 356 ms
[12:33:55]  transpile started ...
[12:34:02]  typescript: ...orow/appocalypse/QRDoors/node_modules/ionic-angular/components/app/app-root.d.ts, line: 1
            Module '"C:/Users/Tomorow/appocalypse/QRDoors/node_modules/@angular/core/core"' has no exported member
            'OpaqueToken'.

       L1:  import { ComponentFactoryResolver, ElementRef, OnInit, OpaqueToken, Renderer, ViewContainerRef } from '@angu
       L2:  import { App } from './app';

[12:34:02]  typescript: ...QRDoors/node_modules/ionic-angular/components/virtual-scroll/virtual-scroll.d.ts, line: 1
            Module '"C:/Users/Tomorow/appocalypse/QRDoors/node_modules/@angular/core/core"' has no exported member
            'TrackByFn'.

       L1:   ElementRef, IterableDiffer, IterableDiffers, NgZone, OnDestroy, Renderer, TrackByFn } from '@angular/core';
       L2:  import { Config } from '../../config/config';

[12:34:02]  typescript: .../Users/Tomorow/appocalypse/QRDoors/node_modules/ionic-angular/config/config.d.ts, line: 1
            Module '"C:/Users/Tomorow/appocalypse/QRDoors/node_modules/@angular/core/core"' has no exported member
            'OpaqueToken'.

       L1:  import { OpaqueToken } from '@angular/core';

[12:34:02]  typescript: ...pocalypse/QRDoors/node_modules/ionic-angular/navigation/nav-controller-base.d.ts, line: 20
            Class 'NavControllerBase' incorrectly implements interface 'NavController'. Types of property 'popTo' are
            incompatible. Type '(indexOrViewCtrl: any, opts?: NavOptions, done?: Function) => Promise<any>' is not
            assignable to type '(page: string | ViewController | Page, params?: any, opts?: NavOptions, done?: Function)
            => Promi...'. Types of parameters 'done' and 'opts' are incompatible. Type 'NavOptions' is not assignable to
            type 'Function'. Property 'apply' is missing in type 'NavOptions'.

      L20:  export declare class NavControllerBase extends Ion implements NavController {
      L21:      parent: any;

[12:34:02]  typescript: ...ow/appocalypse/QRDoors/node_modules/ionic-angular/navigation/url-serializer.d.ts, line: 1
            Module '"C:/Users/Tomorow/appocalypse/QRDoors/node_modules/@angular/core/core"' has no exported member
            'OpaqueToken'.

       L1:  import { OpaqueToken } from '@angular/core';
       L2:  import { DeepLinkConfig, NavLink, NavSegment } from './nav-util';

[12:34:02]  typescript: ...w/appocalypse/QRDoors/node_modules/ionic-angular/platform/platform-registry.d.ts, line: 1
            Module '"C:/Users/Tomorow/appocalypse/QRDoors/node_modules/@angular/core/core"' has no exported member
            'OpaqueToken'.

       L1:  import { OpaqueToken } from '@angular/core';
       L2:  import { PlatformConfig } from './platform';

[12:34:02]  typescript: ...s/Tomorow/appocalypse/QRDoors/node_modules/ionic-angular/util/module-loader.d.ts, line: 1
            Module '"C:/Users/Tomorow/appocalypse/QRDoors/node_modules/@angular/core/core"' has no exported member
            'OpaqueToken'.

       L1:  ort { ComponentFactoryResolver, Injector, NgModuleFactory, NgZone, OpaqueToken, Type } from '@angular/core';
       L2:  import { Config } from '../config/config';

AaronSterling · January 10, 2018, 6:10am

OpaqueToken is deprecated. You have some library or libraries that have not been updated for a while.

Shequeri · January 10, 2018, 6:13am

How can I identify what library needs to be updated? I did sometime like the earlier but it still persist;

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

and then run
npm install promise-polyfill --save-exact

AaronSterling · January 10, 2018, 6:18am

Post your ionic info and your package.json.

Shequeri · January 10, 2018, 6:40am

Ionic Info

cli packages: (C:\Users\Tomorow\AppData\Roaming\npm\node_modules)
    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:
    cordova (Cordova CLI) : 7.1.0

local packages:
    @ionic/app-scripts : 3.1.0
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.0.1-201704062237

System:
    Node : v7.9.0
    npm  : 5.5.1
    OS   : Windows 10

Environment Variables:
    ANDROID_HOME : not set

Misc:
    backend : pro

Package.json

{
  "name": "ionic-hello-world",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "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/animations": "^5.1.3",
    "@angular/common": "^5.1.3",
    "@angular/compiler": "^5.1.3",
    "@angular/compiler-cli": "^5.1.3",
    "@angular/core": "^5.1.3",
    "@angular/flex-layout": "^2.0.0-beta.10-4905443",
    "@angular/forms": "^5.1.3",
    "@angular/http": "^5.1.3",
    "@angular/material": "git+https://github.com/angular/material2-builds.git",
    "@angular/platform-browser": "^5.1.3",
    "@angular/platform-browser-dynamic": "^5.1.3",
    "@angular/platform-server": "^5.1.3",
    "@angular/router": "^5.1.3",
    "@ionic-native/app-version": "^4.4.2",
    "@ionic-native/barcode-scanner": "^4.5.2",
    "@ionic-native/camera": "^4.5.2",
    "@ionic-native/core": "4.3.2",
    "@ionic-native/facebook": "^4.4.2",
    "@ionic-native/file": "^4.5.2",
    "@ionic-native/file-path": "^4.5.2",
    "@ionic-native/ibeacon": "^4.4.2",
    "@ionic-native/in-app-browser": "^4.5.2",
    "@ionic-native/native-storage": "^4.4.2",
    "@ionic-native/network": "^4.4.2",
    "@ionic-native/splash-screen": "4.3.2",
    "@ionic-native/status-bar": "4.3.2",
    "@ionic-native/transfer": "^3.14.0",
    "@ionic/storage": "2.1.3",
    "cordova-android": "^6.3.0",
    "cordova-plugin-camera": "^3.0.0",
    "cordova-plugin-device": "1.1.4",
    "cordova-plugin-facebook4": "^1.9.1",
    "cordova-plugin-file": "^5.0.0",
    "cordova-plugin-file-transfer": "^1.7.0",
    "cordova-plugin-inappbrowser": "^2.0.1",
    "cordova-plugin-ionic-webview": "^1.1.11",
    "cordova-plugin-ios-camera-permissions": "^1.2.0",
    "cordova-plugin-nativestorage": "~2.2.2",
    "cordova-plugin-network-information": "^1.3.4",
    "cordova-plugin-splashscreen": "~4.0.1",
    "cordova-plugin-whitelist": "1.3.1",
    "ionic-angular": "3.0.1-201704062237",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "3.0.0",
    "ng2-order-pipe": "^0.1.5",
    "ngx-order-pipe": "^1.1.1",
    "ngx-qrcode2": "0.0.5",
    "pattern-lock-js": "^1.0.0",
    "phonegap-plugin-barcodescanner": "^7.0.0",
    "promise-polyfill": "7.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.3",
    "@ionic/app-scripts": "3.1.0",
    "typescript": "^2.6.2"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "QRDoors: An Ionic project",
  "cordova": {
    "plugins": {
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-facebook4": {
        "APP_ID": "361064477651650",
        "APP_NAME": "QRDoors"
      },
      "phonegap-plugin-barcodescanner": {},
      "cordova-plugin-file": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-ios-camera-permissions": {}
    },
    "platforms": [
      "android"
    ]
  }
}

AaronSterling · January 10, 2018, 6:48am

Your Ionic-angular is a mess. Put your node-modules folder in the recycle bin. Then update your Node to the current LTS. Then reinstall ionic and cordova. Then run npm i.

Shequeri · January 11, 2018, 9:03am

Hey there, thanks for the help but I try all the steps you asked me to but the error still persist. I found out that the problem is with the node_modules\ionic-angular it seems to be outdated. I tried the following commands to get that fixed.

npm outdated - it lists the libraries that were outdated and I change the version(s) from the packahe.json
npm update - this updates all the libraries that I change their version. Kinda a faster way.

Everything seems to be working fine now. Thanks. P.S OpaqueToken was updated with InjectionToken

Old Version

import { Component, ComponentFactoryResolver, ElementRef, Inject, OpaqueToken, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
import { App } from './app';
import { Config } from '../../config/config';
import { Ion } from '../ion';
import { OverlayPortal } from '../nav/overlay-portal';
import { Platform } from '../../platform/platform';
import * as Constants from './app-constants';
export var /** @type {?} */ AppRootToken = new OpaqueToken('USERROOT');

New Version

import { Component, ComponentFactoryResolver, ElementRef, Inject, InjectionToken, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
import { App } from './app';
import { Config } from '../../config/config';
import { Ion } from '../ion';
import { OverlayPortal } from './overlay-portal';
import { Platform } from '../../platform/platform';
import * as Constants from './app-constants';
export var AppRootToken = new InjectionToken('USERROOT');

Topic		Replies	Views
How to solve import { OpaqueToken } from '@angular/core' Error Ionic Angular	0	1457	August 9, 2021
'"/node_modules/@angular/core/core"' has no exported member 'OpaqueToken' ionic-v3	6	11393	July 19, 2021
@angular/core/core"' has no exported member ionic-v3	3	10785	July 19, 2021
Upgrade to Angular 5 ionic-v3	4	5561	July 19, 2021
OpaqueToken error in vendor.js ionic-v3	8	5053	July 19, 2021

Module '" node_modules/@angular/core/index"' has no exported member 'OpaqueToken'

Related topics