Ionic-framework: App fails to build after upgrade to 3.8.0

[jzwcars]

Ionic version:
[ ] 2.x
[X] 3.x
[ ] 4.x

I'm submitting a ...
[X] bug report
[ ] feature request

Our App builds fine using Ionic 3.7.1, however fails to build with Ionic 3.8.0 due to dependency errors.

Steps to reproduce:
ionic cordova build android --prod --release

Other information:

$ ionic cordova build android --prod --release
Running app-scripts build: --prod --platform android --target cordova
[11:06:29]  build prod started ... 
[11:06:29]  clean started ... 
[11:06:29]  clean finished in 3 ms 
[11:06:29]  copy started ... 
[11:06:29]  deeplinks started ... 
[11:06:29]  deeplinks finished in 208 ms 
[11:06:29]  ngc started ... 
Error: Metadata version mismatch for module /path/to/ionic/jzw-app-uc/node_modules/@ionic/storage/dist/src/storage.d.ts, found version 4, expected 3
    at StaticSymbolResolver.getModuleMetadata (/path/to/ionic/jzw-app-uc/node_modules/@angular/compiler/bundles/compiler.umd.js:25755:34)
    at StaticSymbolResolver._createSymbolsOf (/path/to/ionic/jzw-app-uc/node_modules/@angular/compiler/bundles/compiler.umd.js:25543:46)
    at StaticSymbolResolver.getSymbolsOf (/path/to/ionic/jzw-app-uc/node_modules/@angular/compiler/bundles/compiler.umd.js:25524:14)
    at /path/to/ionic/jzw-app-uc/node_modules/@angular/compiler/bundles/compiler.umd.js:24381:30
    at Array.forEach (native)
    at extractProgramSymbols (/path/to/ionic/jzw-app-uc/node_modules/@angular/compiler/bundles/compiler.umd.js:24380:79)
    at AotCompiler.analyzeModulesAsync (/path/to/ionic/jzw-app-uc/node_modules/@angular/compiler/bundles/compiler.umd.js:23936:47)
    at CodeGenerator.codegen (/path/to/ionic/jzw-app-uc/node_modules/@angular/compiler-cli/src/codegen.js:32:14)
    at Function.NgTools_InternalApi_NG_2.codeGen (/path/to/ionic/jzw-app-uc/node_modules/@angular/compiler-cli/src/ngtools_api.js:73:30)
    at Object.doCodegen (/path/to/ionic/jzw-app-uc/node_modules/@ionic/app-scripts/dist/aot/codegen.js:6:51)
[11:06:32]  copy finished in 3.05 s 

Ionic info:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.16.0
ionic (Ionic CLI) : 3.16.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.8.0

System:

ios-deploy : 1.9.2 
ios-sim    : 6.0.0 
Node       : v6.11.4
npm        : 5.5.1 
OS         : OS X El Capitan
Xcode      : Xcode 8.2.1 Build version 8C1002

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

[jzwcars]

Issue is the result of ionic-storage 2.1.1 depending on Angular 5.x. Downgrading to ionic-storage 2.0.1 resolves the issue

[tarunmishra592]

Hay @jzwcars, I have my ionic-storage downgrade, still I'm getting same issue.
Any solution for same.

[newelement]

Even removing it and adding it back in @2.0.1 did not work for me.

[MomenSh0]

removing current ionic-storage and installing v2.0.1 worked for me.

npm remove @ionic/storage
then
npm install --save @ionic/[email protected]

[sujitgawas19]

I tried removing ionic storage and then installing it again, but it did not work.
Still getting the same error

[jzwcars]

Following the steps as described by MomenSh0 will resolve the issue

[sketchthat]

You should also be able to just run npm install @ionic/[email protected] --save-exact.

[sujitgawas19]

I tried npm install @ionic/[email protected] --save-exact
still getting the same error.

Surekhas-MacBook-Air:healthwise-app aj-sujit$ ionic cordova build android --prod --release
[WARN] Detected @ionic/cli-plugin-cordova in your package.json.

   As of CLI 3.8, it is no longer needed. You can uninstall it:

   npm uninstall -D @ionic/cli-plugin-cordova

[WARN] Detected @ionic/cli-plugin-ionic-angular in your package.json.

   As of CLI 3.8, it is no longer needed. You can uninstall it:

   npm uninstall -D @ionic/cli-plugin-ionic-angular

Running app-scripts build: --prod --platform android --target cordova
[15:08:48] build prod started ...
[15:08:49] clean started ...
[15:08:49] clean finished in 2 ms
[15:08:49] copy started ...
[15:08:49] deeplinks started ...
[15:08:49] deeplinks finished in 49 ms
[15:08:49] ngc started ...
Error: Metadata version mismatch for module /Users/aj-sujit/Documents/healthwise-app/node_modules/@ionic-native/facebook/index.d.ts, found version 4, expected 3
at StaticSymbolResolver.getModuleMetadata (/Users/aj-sujit/Documents/healthwise-app/node_modules/@angular/compiler/bundles/compiler.umd.js:25755:34)
at StaticSymbolResolver._createSymbolsOf (/Users/aj-sujit/Documents/healthwise-app/node_modules/@angular/compiler/bundles/compiler.umd.js:25543:46)
at StaticSymbolResolver.getSymbolsOf (/Users/aj-sujit/Documents/healthwise-app/node_modules/@angular/compiler/bundles/compiler.umd.js:25524:14)
at /Users/aj-sujit/Documents/healthwise-app/node_modules/@angular/compiler/bundles/compiler.umd.js:24381:30
at Array.forEach ()
at extractProgramSymbols (/Users/aj-sujit/Documents/healthwise-app/node_modules/@angular/compiler/bundles/compiler.umd.js:24380:79)
at AotCompiler.analyzeModulesAsync (/Users/aj-sujit/Documents/healthwise-app/node_modules/@angular/compiler/bundles/compiler.umd.js:23936:47)
at CodeGenerator.codegen (/Users/aj-sujit/Documents/healthwise-app/node_modules/@angular/compiler-cli/src/codegen.js:32:14)
at Function.NgTools_InternalApi_NG_2.codeGen (/Users/aj-sujit/Documents/healthwise-app/node_modules/@angular/compiler-cli/src/ngtools_api.js:73:30)
at Object.doCodegen (/Users/aj-sujit/Documents/healthwise-app/node_modules/@ionic/app-scripts/dist/aot/codegen.js:6:51)
[15:08:51] copy finished in 2.70 s

[sujitgawas19]

i'm able to make a dev build. But the prod build fails with the above error

[sketchthat]

What does your package.json file look like? Specifically the @ionic packages.

[sujitgawas19]

Here is my package.json file

"@angular/common": "4.4.4",
"@angular/compiler": "4.4.4",
"@angular/compiler-cli": "4.4.4",
"@angular/core": "4.4.4",
"@angular/forms": "4.4.4",
"@angular/http": "4.4.4",
"@angular/platform-browser": "4.4.4",
"@angular/platform-browser-dynamic": "4.4.4",
"@ionic-native/core": "4.3.2",
"@ionic-native/facebook": "^4.4.0",
"@ionic-native/splash-screen": "4.3.2",
"@ionic-native/status-bar": "4.3.2",
"@ionic/storage": "2.0.1",
"cordova-android": "6.3.0",
"cordova-ios": "4.5.3",
"cordova-plugin-facebook4": "^1.9.1",
"cordova-plugin-splashscreen": "^4.0.3",
"ionic-angular": "3.8.0",
"ionicons": "3.0.0",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"


"@ionic/app-scripts": "3.0.1",
"@ionic/cli-plugin-cordova": "1.6.2",
"@ionic/cli-plugin-ionic-angular": "1.4.1",
"ionic": "3.16.0",
"typescript": "2.3.4"


  "cordova-plugin-splashscreen": {},
  "cordova-plugin-facebook4": {


"platforms": [
  "android"
]

}

[fdambrosio]

I have the same problem

ionic cordova build android --prod --release

Error: Metadata version mismatch for /node_modules/@ionic-native/core/decorators.d.ts, found version 4, expected 3

cli packages: (/usr/local/lib/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 ios 4.5.3
Ionic Framework    : ionic-angular 3.8.0

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.2
ios-sim           : 6.1.2
Node              : v6.11.4
npm               : 5.5.1
OS                : macOS Sierra

[iursevla]

Same error here:
Error: Metadata version mismatch for module C:/Users/Sysop/Desktop/Programar/Ionic 3/MTS/mts-home/node_modules/@ionic-native/location-accuracy/index.d.ts, found version 4, expected 3

cli packages: (C:UsersSysopAppDataRoamingnpmnode_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.0.1
Cordova Platforms  : android 6.3.0
Ionic Framework    : ionic-angular 3.8.0

System:

Node : v8.9.0
npm  : 5.5.1
OS   : Windows 10

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : legacy

[cyrus2021]

Seems to be an issue with the ionic-native facebook plugin 4.4.0 and production builds. After downgrading to version 3.14.0 the production build works but build size is still quite large for a prod build with just facebook login.

[dfa1234]

Success with a little downgrade: ionic to 3.17.0 and all @ionic-native to 4.3.3
My configuration:

"dependencies": {
    "@angular/common": "^4.4.6",
    "@angular/compiler": "^4.4.6",
    "@angular/compiler-cli": "^4.4.6",
    "@angular/core": "^4.4.6",
    "@angular/forms": "^4.4.6",
    "@angular/http": "^4.4.6",
    "@angular/platform-browser": "^4.4.6",
    "@angular/platform-browser-dynamic": "^4.4.6",
    "@ionic-native/app-version": "4.3.3",
    "@ionic-native/barcode-scanner": "4.3.3",
    "@ionic-native/camera": "4.3.3",
    "@ionic-native/core": "4.3.3",
    "@ionic-native/geolocation": "4.3.3",
    "@ionic-native/keyboard": "4.3.3",
    "@ionic-native/push": "4.3.3",
    "@ionic-native/screen-orientation": "4.3.3",
    "@ionic-native/splash-screen": "4.3.3",
    "@ionic-native/status-bar": "4.3.3",
    "@ionic/storage": "2.0.1",**
    "@types/socket.io-client": "^1.4.31",
    "ionic-angular": "^3.9.2",
    "ionic-img-viewer": "2.8.0"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.1.0",
    "ionic": "^3.17.0",
    "typescript": "^2.6.1"
  },

[danielsogl]

Remove your Ionic dependency from your devDeps. The latest CLI is not required as a dependecy anymore.

[danielsogl]

And downgrade TS to 2.4.x. Angular does not support newer TS versions at this moment

[fdambrosio]

My solution is to downgrade all ionic-native plugins version to 4.3.3 using ionic-angular 3.8.0.
I don't have to upgrade it.
The problem was that ionic doctor check has suggested me to upgrade all ionic-native plugins

[iursevla]

The command:

ionic cordova run android --prod

Now works.
My solution wasn't anything specific, it started working out of nowhere.

[dfa1234]

Also I noticed I had less problem after starting using yarn instead of npm

[mmolhoek]

downgrading to @ionic-native to 4.3.3 was enough to make it work again for me. did not have to downgrade ionic 3.18.0 to 3.17.0. and indeed ionic doctor check was suggesting the upgrade and made it not work any more :)

[SujitSingh]

We just need to downgrade Ionic Native to 4.3.3.
I have tried to upgrade dependencies separately and fround that this problem occurs in Ionic Native 4.4.0.

I just tried npm i --save -E @ionic-native/[email protected], and it started to fail android --prod builds.

You can downgrade/stay at 4.3.3 using (any one/all depending upon what you have updated) -

npm i --save @ionic-native/[email protected]
npm i --save @ionic-native/[email protected] 
npm i --save @ionic-native/[email protected]
npm i --save @ionic-native/[email protected]
npm i --save @ionic-native/[email protected]

And you can install other updates separately.

[MikeCIDFG]

Same problem with @ionic-native/status-bar and @ionic-native/splash-screen
"... found version 4, expected version 3."

This is not a problem w/dev builds, or running a debug version on a device.
It is not a problem with ionic cordova build android --release.
It is only a problem with --prod builds.

Doing an npm update seems to have solved the issue w/o downgrading anything.
All my @ionic-native plugins are now at 4.5.2, and ionic cordova run android --prod works fine.

While the answers above provide temp potential fixes for individual plugins, they don't explain or solve the underlying problem. Rollbacks mean using older/broken plugins instead of code that was updated for a reason - that's a quick fix, but not an ideal solution.

My question is WHY is ngc for --prod builds expecting version 3 of various ionic-native plugins when package.json clearly says to use version ^4? Why & where is it looking for version 3 at all?
Where does ngc compiler/build production process pull its information from? How can people solve the underlying issue instead of degrading their app's functionality one outdated plugin at a time?

Thank for any insight ~

[letsila]

Thanks @SujitSingh this is what solved it for me.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.