RC0 - Android - Initial Page utilizing pipes fails

Ionic Framework ionic-v3
1

This is my entire home.html file which works with Ionic Serve but FAILS on Android!!!

Total: {{123 | currency:‘USD’:true:‘1.2-2’}}

This succeeds on Android

Total: {{123}}

This is the first page which loads from my TutorialSlides Page…

7 814808 error EXCEPTION: Cannot convert undefined or null to object
8 814817 error ORIGINAL STACKTRACE:
9 814827 error TypeError: Cannot convert undefined or null to object
at Function.t.format (http://192.168.1.144:8100/build/main.js:9:25227)
at Ue (http://192.168.1.144:8100/build/main.js:1:23877)
at t.transform (http://192.168.1.144:8100/build/main.js:9:29162)
at http://192.168.1.144:8100/build/main.js:1:9587
at e.detectChangesInternal (http://192.168.1.144:8100/build/main.js:46:1183)
at e.t.detectChanges (http://192.168.1.144:8100/build/main.js:8:25905)
at e.t.detectViewChildrenChanges (http://192.168.1.144:8100/build/main.js:8:26453)
at e.detectChangesInternal (http://192.168.1.144:8100/build/main.js:45:31365)
at e.t.detectChanges (http://192.168.1.144:8100/build/main.js:8:25905)
at t.detectChanges (http://192.168.1.144:8100/build/main.js:8:5627)
10 814836 log constructed
11 814865 log init
12 814869 log end init
13 814876 error Uncaught TypeError: Cannot convert undefined or null to object, http://192.168.1.144:8100/build/polyfills.js, Line: 3

This feels like a massive framework bug. What the heck is going on?!

2 Likes
2

I think I’m hitting the same issue.

The html page:

...
<p>Item Updated: {{ item.date_updated | date }}</p>
...

this is the page constructor:

...
export class ItemPage {
  item: any;

  constructor() {
    this.item = {
      "date_updated" : 1475537345945
    }
...

Error when running on Android (ionic build) which uses the prod build:

main.js:3644 TypeError: Cannot convert undefined or null to object
    at new DateTimeFormat (native)
    at intlDateFormat (http://localhost:3000/build/main.js:1:28259)
    at Object.yMMMd (http://localhost:3000/build/main.js:1:28817)
    at dateFormatter (http://localhost:3000/build/main.js:1:28935)
    at Function.e.format (http://localhost:3000/build/main.js:11:2879)
    at e.transform (http://localhost:3000/build/main.js:11:3342)
    at http://localhost:3000/build/main.js:1:12330
    at t.detectChangesInternal (http://localhost:3000/build/main.js:49:274)
    at t.e.detectChanges (http://localhost:3000/build/main.js:9:31592)
    at t.e.detectViewChildrenChanges (http://localhost:3000/build/main.js:10:169)

--------------------------------

Your system information:

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.1.2
Xcode version: Xcode 8.0 Build version 8A218a

Any suggestions?

3

Same case here with “Date” filter.

4

Not the perfect answer… but i removed the pipes from my html pages and instead call a format method in my .ts page. In that page I construct a new static date filter, currency pipe etc…

I hadn’t tried it yet, but the ionic team just posted a blog on rc0 fixes. It updates some tooling and version in and could also fix the problem.

5

I haven’t gotten date pipes to work yet, when using the AoT compiler.

I’d think using it like this, would be safe:
<div class="pickup-time" *ngIf="order.pickupTime">{{order.pickupTime | date:'dd-MM-yy HH:mm'}}</div>

Where pickupTime is a string (can be empty), but it throws errors.
I’m avoiding pipes now.