Ionic - prod build gets error due to AngularFire2 issues


#1

Hey everyone,

I’ve noticed this issue with my Ionic build. When I run ionic cordova build ios --prod, I get the following errors:

Running app-scripts build: --prod --iscordovaserve --externalIpRequired --nobrowser

[18:02:10]  build prod started ...
[18:02:10]  clean started ...
[18:02:10]  clean finished in 5 ms
[18:02:10]  copy started ...
[18:02:10]  ngc started ...
[18:02:12]  build prod failed: Error encountered resolving symbol values statically. Calling function 'makeDecorator',
            function calls are not supported. Consider replacing the function or lambda with a reference to an exported
            function, resolving symbol Injectable in
            /Applications/MAMP/htdocs/bandly-app-mobile/node_modules/angularfire2/node_modules/@angular/core/src/di/metadata.d.ts,
            resolving symbol Injectable in
            /Applications/MAMP/htdocs/bandly-app-mobile/node_modules/angularfire2/node_modules/@angular/core/src/di.d.ts,
            resolving symbol Injectable in
            /Applications/MAMP/htdocs/bandly-app-mobile/node_modules/angularfire2/node_modules/@angular/core/src/core.d.ts,
            resolving symbol Injectable in
            /Applications/MAMP/htdocs/bandly-app-mobile/node_modules/angularfire2/node_modules/@angular/core/index.d.ts,
            resolving symbol AngularFireAuth in
            /Applications/MAMP/htdocs/bandly-app-mobile/node_modules/angularfire2/auth/auth.d.ts, resolving symbol
            AngularFireAuth in /Applications/MAMP/htdocs/bandly-app-mobile/node_modules/angularfire2/auth/auth.d.ts
[WARN] Error occurred during command execution from a CLI plugin (@ionic/cli-plugin-cordova). Your plugins may be out of date.
Error: Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /Applications/MAMP/htdocs/bandly-app-mobile/node_modules/angularfire2/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol Injectable in /Applications/MAMP/htdocs/bandly-app-mobile/node_modules/angularfire2/node_modules/@angular/core/src/di.d.ts, resolving symbol Injectable in /Applications/MAMP/htdocs/bandly-app-mobile/node_modules/angularfire2/node_modules/@angular/core/src/core.d.ts, resolving symbol Injectable in /Applications/MAMP/htdocs/bandly-app-mobile/node_modules/angularfire2/node_modules/@angular/core/index.d.ts, resolving symbol AngularFireAuth in /Applications/MAMP/htdocs/bandly-app-mobile/node_modules/angularfire2/auth/auth.d.ts, resolving symbol AngularFireAuth in /Applications/MAMP/htdocs/bandly-app-mobile/node_modules/angularfire2/auth/auth.d.ts

When I run ionic cordova build ios, I don’t get the errors, only when I add the --prod flag.

Here is my package.json file:

dependencies": {
        "@angular/common": "4.0.2",
        "@angular/compiler": "4.0.2",
        "@angular/compiler-cli": "4.0.2",
        "@angular/core": "4.0.2",
        "@angular/forms": "4.0.2",
        "@angular/http": "4.0.2",
        "@angular/platform-browser": "4.0.2",
        "@angular/platform-browser-dynamic": "4.0.2",
        "@ionic-native/camera": "^3.8.0",
        "@ionic-native/core": "3.6.1",
        "@ionic-native/facebook": "^3.8.0",
        "@ionic-native/file": "^3.6.1",
        "@ionic-native/geolocation": "^3.8.0",
        "@ionic-native/in-app-browser": "^3.8.0",
        "@ionic-native/keyboard": "^3.8.0",
        "@ionic-native/splash-screen": "^3.6.1",
        "@ionic-native/status-bar": "3.6.1",
        "@ionic-native/transfer": "^3.8.0",
        "@ionic/cli-plugin-cordova": "^1.3.0",
        "@ionic/storage": "2.0.1",
        "@types/algoliasearch": "^3.18.0",
        "@types/jasmine": "^2.5.41",
        "@types/lodash": "^4.14.55",
        "@types/lodash.update": "^4.10.1",
        "algoliasearch": "^3.21.1",
        "angular2-autosize": "^1.0.1",
        "angular2-moment": "^1.0.0",
        "angularfire2": "^2.0.0-beta.7-pre",
        "cordova-android": "6.1.0",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-admobpro": "^2.28.3",
        "cordova-plugin-camera": "^2.4.1",
        "cordova-plugin-compat": "^1.1.0",
        "cordova-plugin-console": "^1.0.7",
        "cordova-plugin-crosswalk-webview": "^2.3.0",
        "cordova-plugin-device": "^1.1.6",
        "cordova-plugin-email": "^1.2.6",
        "cordova-plugin-extension": "^1.5.1",
        "cordova-plugin-facebook4": "^1.9.0",
        "cordova-plugin-file": "^4.3.3",
        "cordova-plugin-file-transfer": "^1.6.3",
        "cordova-plugin-geolocation": "^2.4.3",
        "cordova-plugin-inappbrowser": "^1.7.1",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.3",
        "cordova-plugin-whitelist": "^1.3.2",
        "cordova-plugin-wkwebview-engine": "git+https://github.com/driftyco/cordova-plugin-wkwebview-engine.git",
        "firebase": "^3.7.2",
        "imgcache.js": "^1.1.1",
        "ionic-angular": "3.1.1",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "lodash": "^4.17.2",
        "moment": "^2.17.1",
        "ng-semantic": "^1.1.13",
        "ng2-toasty": "^4.0.0",
        "prod": "^1.0.1",
        "rxjs": "5.1.1",
        "sw-toolbox": "3.4.0",
        "zone.js": "^0.8.10"
    },
    "devDependencies": {
        "@angular/cli": "^1.0.4",
        "@ionic/app-scripts": "1.1.4",
        "@ionic/cli-plugin-cordova": "1.1.1",
        "@ionic/cli-plugin-ionic-angular": "1.3.0",
        "@ionic/cli-plugin-ionic1": "1.3.0",
        "typescript": "~2.2.1"
    },

And when I run ionic info:

[ERROR] Error with /Applications/MAMP/htdocs/bandly-app-mobile/www/lib/ionic/version.json file: FILE_NOT_FOUND

global packages:

    @ionic/cli-plugin-proxy : 1.3.0
    @ionic/cli-utils        : 1.3.0
    Cordova CLI             : 7.0.0
    Ionic CLI               : 3.3.0

local packages:

    @ionic/app-scripts              : 1.1.4
    @ionic/cli-plugin-cordova       : 1.3.0
    @ionic/cli-plugin-ionic-angular : 1.3.0
    @ionic/cli-plugin-ionic1        : 1.3.0
    Cordova Platforms               : ios 4.4.0
    Ionic Framework                 : ionic-angular 3.1.1
    Ionic Framework                 : unknown

System:

    Node       : v6.9.0
    OS         : OS X El Capitan
    Xcode      : Xcode 8.2.1 Build version 8C1002
    ios-deploy : 1.9.1
    ios-sim    : 5.0.13

Could this be an issue with typings? Anyway, if anyone has run into this issue as well, let me know! Thanks in advance!

UPDATE: Updating the latest version of AngularFire2 4.0 solved my issue.


Error: ./src/pages/amor/amor.ngfactory.js
#2

I’m also getting the same issue.

In ionic2, cordova run ios, but when running ionic cordova run ios throwing below error, typescript not recognised.

ionic info

global packages:

@ionic/cli-utils : 1.3.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.3.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : android 6.2.1 browser 4.1.0 ios 4.4.0
Ionic Framework                 : ionic-angular 3.1.1

System:

Node       : v6.10.3
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002 
ios-deploy : 1.9.1 
ios-sim    : 5.0.13 

npm outdated
Package Current Wanted Latest Location
@angular/common 4.0.2 4.1.3 4.1.3 TISA
@angular/compiler 4.0.2 4.1.3 4.1.3 TISA
@angular/compiler-cli 4.0.2 4.1.3 4.1.3 TISA
@angular/core 4.0.2 4.1.3 4.1.3 TISA
@angular/forms 4.0.2 4.1.3 4.1.3 TISA
@angular/http 4.0.2 4.1.3 4.1.3 TISA
@angular/platform-browser 4.0.2 4.1.3 4.1.3 TISA
@angular/platform-browser-dynamic 4.0.2 4.1.3 4.1.3 TISA
@angular/platform-server 2.2.1 2.2.1 4.1.3 TISA
@ionic-native/camera 3.4.4 3.4.4 3.11.0 TISA
@ionic-native/core 3.6.1 3.11.0 3.11.0 TISA
@ionic-native/email-composer 3.4.4 3.4.4 3.11.0 TISA
@ionic-native/flashlight 3.4.4 3.4.4 3.11.0 TISA
@ionic-native/geolocation 3.4.4 3.4.4 3.11.0 TISA
@ionic-native/in-app-browser 3.6.1 3.11.0 3.11.0 TISA
@ionic-native/location-accuracy 3.4.4 3.4.4 3.11.0 TISA
@ionic-native/native-geocoder 3.4.4 3.4.4 3.11.0 TISA
@ionic-native/status-bar 3.6.1 3.11.0 3.11.0 TISA
@types/lodash 4.14.64 4.14.64 4.14.65 TISA
cordova-plugin-add-swift-support 1.6.0 1.6.0 1.6.2 TISA
cordova-plugin-console 1.0.5 1.0.5 1.0.7 TISA
cordova-plugin-device 1.1.4 1.1.4 1.1.6 TISA
cordova-plugin-statusbar 2.2.1 2.2.1 2.2.3 TISA
cordova-plugin-whitelist 1.3.1 1.3.1 1.3.2 TISA
cordova-plugin-wkwebview-engine 1.0.0 git git TISA
ionic-angular 3.1.1 3.3.0 3.3.0 TISA
ionic-gulp-scripts-copy 2.0.0 2.0.0 2.0.1 TISA
ionic-native 2.4.1 2.4.1 2.9.0 TISA
node-sass 4.5.1 4.5.1 4.5.3 TISA
rxjs 5.1.1 5.4.0 5.4.0 TISA
sw-toolbox 3.4.0 3.4.0 3.6.0 TISA
zone.js 0.8.9 0.8.11 0.8.11 TISA

ionic cordova run ios

[WARN] Error occurred during command execution from a CLI plugin (@ionic/cli-plugin-cordova). Your plugins may be out of date.
TypeError: Cannot read property 'Private' of undefined

{
“name”: “ProjectName”,
“author”: "rkjhaw@hotmail.com",
“homepage”: “http://ionicframework.com/”,
“private”: true,
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”
},
“dependencies”: {
"@angular/common": “4.0.2”,
"@angular/compiler": “4.0.2”,
"@angular/compiler-cli": “4.0.2”,
"@angular/core": “4.0.2”,
"@angular/forms": “4.0.2”,
"@angular/http": “4.0.2”,
"@angular/platform-browser": “4.0.2”,
"@angular/platform-browser-dynamic": “4.0.2”,
"@ionic-native/in-app-browser": “3.6.1”,
"@ionic-native/status-bar": “3.6.1”,
"@angular/platform-server": “2.2.1”,
"@angular/router": “^4.1.3”,
"@ionic-native/camera": “3.4.4”,
"@ionic-native/core": “3.6.1”,
"@ionic-native/email-composer": “3.4.4”,
"@ionic-native/flashlight": “3.4.4”,
"@ionic-native/geolocation": “3.4.4”,
"@ionic-native/location-accuracy": “3.4.4”,
"@ionic-native/native-geocoder": “3.4.4”,
"@ionic-native/splash-screen": “3.11.0”,
"@ionic/storage": “2.0.1”,
“cordova-browser”: “^4.1.0”,
“cordova-ios”: “^4.4.0”,
“cordova-plugin-add-swift-support”: “1.6.0”,
“cordova-plugin-console”: “1.0.5”,
“cordova-plugin-device”: “1.1.4”,
“cordova-plugin-email-composer”: “0.8.3”,
“cordova-plugin-geolocation”: “^2.4.3”,
“cordova-plugin-screen-orientation”: “~2.0.0”,
“cordova-plugin-splashscreen”: “^4.0.3”,
“cordova-plugin-statusbar”: “2.2.1”,
“cordova-plugin-whitelist”: “1.3.1”,
“cordova-plugin-wkwebview-engine”: “git+https://github.com/apache/cordova-plugin-wkwebview-engine.git#1.0.0”,
“ionic-angular”: “3.1.1”,
“ionic-native”: “2.4.1”,
“ionic-plugin-keyboard”: “~2.2.1”,
“ionicons”: “3.0.0”,
“lodash”: “4.17.4”,
“node-sass”: “4.5.1”,
“reflect-metadata”: “^0.1.10”,
“rxjs”: “5.1.1”,
“sw-toolbox”: “3.4.0”,
“underscore”: “^1.8.3”,
“zone.js”: “0.8.9”
},
“devDependencies”: {
"@ionic/app-scripts": “^1.3.7”,
"@ionic/cli-plugin-cordova": “1.3.0”,
"@ionic/cli-plugin-ionic-angular": “1.3.0”,
"@types/lodash": “4.14.64”,
“ionic-gulp-scripts-copy”: “^2.0.0”,
“node-sass”: “4.5.2”,
“typescript”: “2.3.2”
},
“cordovaPlugins”: [
“cordova-plugin-whitelist”,
“cordova-plugin-console”,
“cordova-plugin-statusbar”,
“cordova-plugin-device”,
“cordova-plugin-splashscreen”,
“cordova-plugin-geolocation”,
“ionic-plugin-keyboard”
],
“cordovaPlatforms”: [],
“description”: “TISA:Toner & Ink Scanning App”,
“cordova”: {
“plugins”: {
“cordova-plugin-console”: {},
“cordova-plugin-device”: {},
“cordova-plugin-email-composer”: {},
“cordova-plugin-screen-orientation”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-whitelist”: {},
“ionic-plugin-keyboard”: {},
“cordova-plugin-geolocation”: {
“GEOLOCATION_USAGE_DESCRIPTION”: " "
},
“cordova-plugin-splashscreen”: {}
},
“platforms”: [
“browser”
]
}


#3

Why are you using such an old version of AngularFire? Unless you need it because of some outside dependency, updating that is the first thing I’d try.


#4

I had the same error this morning. I upgraded to AngularFire2 4.0 (following this guide: https://github.com/angular/angularfire2/blob/master/docs/version-4-upgrade.md). This solved the build issues.


#5

I got this error with latest ionic 3.6.0, ionic-cli 3.9.2. Note: work fine without --prod

[13:28:06]  build prod started ... 
[13:28:06]  clean started ... 
[13:28:06]  clean finished in 3 ms 
[13:28:06]  copy started ... 
[13:28:06]  ngc started ... 
[13:28:21]  ngc finished in 14.20 s 
[13:28:21]  preprocess started ... 
[13:28:21]  deeplinks started ... 
[13:28:22]  deeplinks finished in 1.32 s 
[13:28:22]  optimization started ... 
[13:28:22]  copy finished in 16.11 s 
Error: ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '../../angularfire2/auth' in '/Users/moneyTrackerApp/src/app'
resolve '../../angularfire2/auth' in '/Users/moneyTrackerApp/src/app'
  using description file: /Users/moneyTrackerApp/package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/moneyTrackerApp/package.json (relative path: ./src/app)
    using description file: /Users/moneyTrackerApp/package.json (relative path: ./angularfire2/auth)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/moneyTrackerApp/angularfire2/auth doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/moneyTrackerApp/angularfire2/auth.js doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/moneyTrackerApp/angularfire2/auth.ts doesn't exist
      as directory
        /Users/moneyTrackerApp/angularfire2/auth doesn't exist
[/Users/moneyTrackerApp/angularfire2/auth]
[/Users/moneyTrackerApp/angularfire2/auth.js]
[/Users/moneyTrackerApp/angularfire2/auth.ts]
[/Users/moneyTrackerApp/angularfire2/auth]
 @ ./src/app/app.module.ngfactory.js 32:0-52
 @ ./src/app/main.ts,./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '../../angularfire2/database' in '/Users/moneyTrackerApp/src/app'

is anyone facing this?

ionic info

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

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1 

local packages:

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

System:

    Android SDK Tools : 26.0.2
    ios-deploy        : 1.9.1 
    ios-sim           : 6.0.0 
    Node              : v6.11.2
    npm               : 3.10.10 
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b 

#7

I’m using both auth and database and I built with --prod a day ago and got none of these messages. How are you using af?


#8

3 days ago, It worked fine with me. just from yesterday.
I follow this guide https://github.com/angular/angularfire2/blob/master/docs/Auth-with-Ionic3-Angular4.md.


#9

What’s your package.json?


#10

You can update to latest ionic-cli, ionic, remove platform, node-modules folder and try again.
I think there is problem with --prod?


#11

I’m seeing no errors when I build.


#12

Here is my package.json

"config": {
        "ionic_copy": "./config/copy.config.js"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/admob-free": "^4.1.0",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/email-composer": "^4.1.0",
        "@ionic-native/facebook": "^3.12.1",
        "@ionic-native/google-plus": "^4.1.0",
        "@ionic-native/in-app-browser": "^4.1.0",
        "@ionic-native/photo-viewer": "^4.1.0",
        "@ionic-native/social-sharing": "^4.1.0",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "@ngx-translate/core": "^7.0.0",
        "@ngx-translate/http-loader": "^0.1.0",
        "ajv": "^5.2.2",
        "angular2-moment": "^1.5.0",
        "angularfire2": "^4.0.0-rc.1",
        "com-sarriaroman-photoviewer": "^1.1.10",
        "cordova-admob-sdk": "^0.8.0",
        "cordova-android": "^6.2.3",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-admob-free": "^0.10.0",
        "cordova-plugin-console": "^1.0.7",
        "cordova-plugin-device": "^1.1.6",
        "cordova-plugin-email-composer": "^0.8.7",
        "cordova-plugin-facebook4": "^1.9.1",
        "cordova-plugin-googleplus": "^5.1.1",
        "cordova-plugin-inappbrowser": "^1.7.1",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.3",
        "cordova-plugin-whitelist": "^1.3.2",
        "cordova-plugin-wkwebview-engine": "git+https://github.com/ionic-team/cordova-plugin-wkwebview-engine.git",
        "cordova-plugin-x-socialsharing": "^5.1.8",
        "cordova-promise-polyfill": "0.0.2",
        "es6-promise-plugin": "^4.1.0",
        "firebase": "^4.1.3",
        "flag-icon-css": "^2.8.0",
        "font-awesome": "^4.7.0",
        "ion2-calendar": "^1.0.7",
        "ionic-angular": "3.6.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "promise-polyfill": "6.0.2",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.1.4",
        "typescript": "2.3.4"
    },

#13

The only difference I see is that I’m using af rc0. Maybe rc1 introduced a change? I’ll update and see if that still builds with --prod.


#14

Really, I try with rc1, rc2. But still the same. Still error. Stuck with this issues 2 day. :frowning:
without --prod is work fine.
Expert ionic developer, please advice, Thanks.


#15

There is no rc2. And rc0 is still the npm default, I just checked. Looks as though rc1 introduces some changes through the Firebase SDK 4.0 (change from 3.x). So you might want to look at the Firebase SDK changelog. You might have an issue there.


#16

To update this: ionic build --prod works fine with ionic-angular 3.6 and ionic-cli 3.9.2. Yarn is downgrading AngularFire2 from 4-rc1 to 4-rc0, and npm is installing rc0. So I think it’s safest to stay with Firebase 3.9 and AF2 4-rc0. Go to Firebase 4 and AF 4-rc1 at your own risk.


#17

Hey, I checked with Firebase 3.9 and AF2 4-rc0. Still the same.
(Current version is rc 2[https://github.com/angular/angularfire2/blob/master/package.json])


#18

It isn’t a stable release. Look at the Changelog or the Issues.


Module not found: Error: Can't resolve '../../angularfire2/auth'
#19

Yes. I checked with your suggestion.
Also checking with TAG branch of sourcecode which It worked before. The same error.
Maybe I will deploy to apple store without --prod. :frowning:


#20

Hey @AaronSterling. FIne with AF rc1. Thanks


Error: ./src/pages/amor/amor.ngfactory.js
#21

AF rc1 fine for me too. Thanks