Angular pipes not working on production builds?

[gianpaj]

Short description of the problem:

Cannot convert undefined or null to object error when displaying values on a production build.

home.html

<p>{{mydate | date}}</p>

home.ts

export class HomePage {

  public mydate: Number;

  constructor(public navCtrl: NavController) {
    this.mydate = 1475537345945;
  }

}

What behavior are you expecting?

Converting the date correctly as in a dev build.

Steps to reproduce:

1. ionic start AngularPipeRepro tabs --v2
2. cd AngularPipeRepro
3. Open the editor and change home.html and home.ts as above.
4. npm run build or ionic run android (or similar that run the prod build)
5. Open the page and see the stacktrace

Note: you can see this in the browser as well when running:
browser-sync start --server www

Full stacktrace:

main.js:3640 EXCEPTION: Cannot convert undefined or null to objectt.handleError @ main.js:3640next @ main.js:8161e.object.i @ main.js:7399e.__tryOrUnsub @ main.js:6869e.next @ main.js:6818e._next @ main.js:6771e.next @ main.js:6735e.next @ main.js:7216e.emit @ main.js:7391onError @ main.js:7622onHandleError @ main.js:7490t.handleError @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
main.js:3645 ORIGINAL STACKTRACE:t.handleError @ main.js:3645next @ main.js:8161e.object.i @ main.js:7399e.__tryOrUnsub @ main.js:6869e.next @ main.js:6818e._next @ main.js:6771e.next @ main.js:6735e.next @ main.js:7216e.emit @ main.js:7391onError @ main.js:7622onHandleError @ main.js:7490t.handleError @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
main.js:3646 TypeError: Cannot convert undefined or null to object
    at new DateTimeFormat (native)
    at ge (http://localhost:3000/build/main.js:1:21631)
    at Object.yMMMd (http://localhost:3000/build/main.js:1:22108)
    at Oe (http://localhost:3000/build/main.js:1:22177)
    at Function.t.format (http://localhost:3000/build/main.js:9:8542)
    at t.transform (http://localhost:3000/build/main.js:9:8873)
    at http://localhost:3000/build/main.js:1:9119
    at e.detectChangesInternal (http://localhost:3000/build/main.js:31:25274)
    at e.t.detectChanges (http://localhost:3000/build/main.js:8:10128)
    at e.t.detectViewChildrenChanges (http://localhost:3000/build/main.js:8:10676)

Which @ionic/app-scripts version are you using?

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.36
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.6.1
Xcode version: Xcode 8.0 Build version 8A218a

Other information:
Possible related issue:
https://forum.ionicframework.com/t/rc0-android-initial-page-utilizing-pipes-fails/66304/1

[jgw96]

Hello, thanks for using Ionic! Just to be clear, this does not happen with a dev build correct?

[gianpaj]

@jgw96 that's correct.
Running ionic serve works fine.

Also, this doesn't look like to be specific to the date pipe.
The same happens with the currency pipe:

<p>{{ 123 | currency:'USD':true }}</p>

TypeError: Cannot convert undefined or null to object
    at new NumberFormat (native)
    at Function.t.format (http://localhost:3002/build/main.js:9:7031)
    at Te (http://localhost:3002/build/main.js:1:22885)
    at t.transform (http://localhost:3002/build/main.js:9:10966)
    at http://localhost:3002/build/main.js:1:9330
    at e.detectChangesInternal (http://localhost:3002/build/main.js:31:25381)
    at e.t.detectChanges (http://localhost:3002/build/main.js:8:10128)
    at e.t.detectViewChildrenChanges (http://localhost:3002/build/main.js:8:10676)
    at e.t.detectChangesInternal (http://localhost:3002/build/main.js:8:10324)
    at e.t.detectChanges (http://localhost:3002/build/main.js:8:10128)

[cleever]

Same case here with "date" filter.

Ionic serve works fine. On device the page fails.

TypeError: Cannot convert undefined or null to object

[jgw96]

Thanks for the info! Also, are you guys testing on iOS or Android?

[cleever]

@jgw96 Android.

[gianpaj]

I tried on Android 6.0, specifically on the Genymotion emulator. Since this is a JS error I believe it's not related to the mobile platform.
I can later on both if necessary

[OnnoGabriel]

This error occurs also with any custom pipe in production builds. For example, if I use this pipe

import {Pipe} from '@angular/core';
@Pipe({
  name: 'testpipe'
})
export class TestPipe {
  transform(value, args) {
     return value+1;
  }
}

with {{data | testpipe}} in page.html and try to build it with ionic build, I get the error message

[11:33:21]  Error: Error at /path_to_project/.tmp/pages/page/page.ngfactory.ts:930:72 
[11:33:21]  Supplied parameters do not match any signature of call target. 
[11:33:21]  ngc failed 
[11:33:21]  ionic-app-script task: "build" 
[11:33:21]  Error: Error 

Tested with app-scripts 0.0.36.

Again, no error with ionic serve.

[Manduro]

@OnnoGeorg Your issue is a different issue and can be fixed by removing the , args from the transform function of your pipe, or by placing a question mark behind it to make the parameter optional.

[jgw96]

Hello all! Just an update on this, I have tracked this down to being an NGC bug that it looks like the Angular team has fixed in the latest version of NGC. The current issue on our end is that we use an older version of NGC that still has that bug so we are looking into updating to use the latest NGC. Thanks for the patience on this everyone!