OpaqueToken error in vendor.js

Ionic Framework ionic-v3
1

I’ve been trying to update a program from ionic 2.0.1 to ionic 3 (angular 5) and I’m running into something that I’ve had little luck finding online.

Basically, when I run ‘ionic serve’ I get the following error -
WEBPACK_IMPORTED_MODULE_0__angular_core.OpaqueToken is not a constructor
image

and it’s coming from vendor.js (which is added to the project in the index.html file)

I did see from the angular upgrade site that all OpaqueTokens should be replaced by InjectTokens, and I tried to do directly in vendor.js… but it seems that vendor.js is created during ionic serve, so all of the changes I made are overwritten.

After reading a bunch about webpack, I imagine that the problem is that I have an import of Angular core somewhere that shouldn’t be there… but I’m unsure of what to search for. (especially because I have “@angular/core”: “5.0.1”, in my package.json file. I’m just not sure what to get rid of.

Here’s the rest of my package.json file… if it helps:

{
“name”: “neighborly_test”,
“version”: “0.0.1”,
“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/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/badge”: “^4.4.0”,
“@ionic-native/core”: “4.4.0”,
“@ionic-native/splash-screen”: “4.4.0”,
“@ionic-native/status-bar”: “4.4.0”,
“@ionic/storage”: “2.1.3”,
“angularfire2”: “^2.0.0-beta.8”,
“gsap”: “^1.19.1”,
“ionic-angular”: “3.9.2”,
“ionicons”: “3.0.0”,
“moment”: “^2.18.1”,
“rxjs”: “5.5.2”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.18”
},
“devDependencies”: {
“@ionic/app-scripts”: “3.1.2”,
“typescript”: “2.4.2”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-app-version”: {},
“cordova-plugin-badge”: {}
}
}
}

2

It turns out the culprit was angularfire:

3

I have the same error and I can’t find a solution…
for my Firebase I’m using Cordova-plugin-firebase and not AngularFire…

please, any advice?
its happen when I try to update to angular 5 and higher…

Thanks advance

4

Same issue …
Updating from Ionic 3.8 to to 3.9 with angular 5

5

I also have the same issue. I am trying to port an working angular app to ionic. I get the same error. Any solutions?

6

So… This is basically the problem that I saw. I’m not an expert on how ionic is flanged together, but I can give you my best shot. I believe that this is how the problem is occurring. But first some big picture definitions.

WEBPACK -> This is what is used to ‘transpile’ the code. That is, turn the typescript into javascript. This is invoked when I perform an “Ionic serve”

OPAQUETOKEN -> superseded structure. This should now be InjectToken.

VENDOR.JS -> This is one of the files that is created from your package.json (hence vendor… as in “third party vendor” You should never touch this file… (which is totally what I did when I was trying to figure this out… oops)

In a nutshell, the problem is that you’re (probably) using an older version of some plugin that has not updated to using InjectToken. Therefore, all you have to do is upgrade it to the latest version (assuming that the programmers actually migrated to InjectToken. If not… you’re screwed) However, the problem, for me, was to figure out what plugin in the package.json was causing problems.

So, this is basically what I did to figure it out:

  1. After I did the transpiling, I did a global search for OpaqueToken. It should show up somewhere in the html folder (never in your code) You’ll probably find it in vendor.js

  2. After you find OpaqueToken, look at the section of code that it is associated with within the vendor.js code and try to match it with the plugin in your package.json folder.

  3. When you find which plugin hasn’t been updated update it. If it’s already the latest version, you’ll have to look at the plugins issue folder (which is in the link I sent above that reads “Issue: ‘OpaqueToken’, function calls are not supported.” You’ll probably find other people that have had the same problem.

  4. If you can’t find anything in there, you’ll have to contact the keeper of the repository directly. They are the only ones that can fix it. (unless you contribute to their repository, that is!)

TL:DR - The OpaqueToken error is caused by an out of date plugin. Update that plugin.

2 Likes
7

@wterrill You are amazing !!! You saved my day. Thank you so much. The problem was @angular/flex-layout wanted latest versions of common and core modules. Your approach of debugging the issue helped me. Merry Christmas !!

8

Merry Christmas to you as well. I’m glad that helped!