例外：TypeError：未定义不是Ionic 2中的对象（评估“ pipe.constructor”）吗？

Question

My Ionic 2 application working fine on chrome browser, it gives expected output. 我的Ionic 2应用程序在chrome浏览器上可以正常工作，它可以提供预期的输出。 But when it run on simulator or browser gives below error. 但是，当它在模拟器或浏览器上运行时，会出现以下错误。

Here is the code I'm using: 这是我正在使用的代码：

<label class="time">{{appointment.DateSent | date:"HH"}}:{{ appointment.DateSent| date:"mm"}}</label>
<label class="month">{{appointment.DateSent| date:"MMM"}}</label>
<label class="day">{{appointment.DateSent| date:"dd"}}</label>
<label class="year">{{appointment.DateSent| date:"yyyy"}}</label>

Class implementation: 类的实现：

    import {Page, NavController, NavParams} from 'ionic/ionic';
    import { Component, Pipe, PipeTransform, Inject, OnInit} from 'angular2/core';
    import 'rxjs/add/operator/map';
    import { Http, Headers, URLSearchParams } from 'angular2/http';
    import {SERVER_URL, appName, alertAppName} from '../services/config';
    import {AppointmentsDetailPage} from '../appointments-detail/appointments-detail';
    import {MessagesService} from '../services/messages-service';

    var today = new Date();

    @Page({
      templateUrl: 'build/pages/appointments/appointments.html',
      providers: [MessagesService]
    })
    export class AppointmentsPage implements PipeTransform {
      constructor(http: Http, nav: NavController, messagesService:MessagesService, navParams:NavParams) {
            this.http = http;
            this.messagesService = messagesService;
            this.nav = nav;

            this.selectedItem = navParams.get('item');
      }

ngOnInit() {
        this.messagesService.getAppointmentList()
        .subscribe(data => {

          var appointments = new Array();
              for(var i in data){
                var key = data[i];

                appointments.push({
                  MessageID: key.MessageID,
                  CategoryID: key.CategoryID,
                  DateSent: new Date(key.DateSent),
                  Title: key.Title,
                  MessageContent: key.MessageContent,
                  Sender: key.Sender,
                  Recipient: key.Recipient,
                  DateReceived: key.DateReceived,
                  DateRead: key.DateRead,
                  Note_Direction: key.Note_Direction,
                  Viewed: key.Viewed,
                  AppointmentDateTime: key.AppointmentDateTime,
                  MessageAttachments: key.MessageAttachments
                });
              }


      this.appointments = appointments;

All the date pipe were working alright in Chrome browser with no error, but it gives below exception on simulator or device (took from Safari simulator debugging) 所有日期管道在Chrome浏览器中都可以正常运行，没有错误，但是在模拟器或设备上给出了以下异常（取自Safari模拟器调试）

Edited: 编辑：

Index.html Index.html

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
  <title>Ionic</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <!--<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://XX.XX.XX.XX:8084/mypp/">-->
  <!--<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">-->
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="stylesheet" href="build/css/font-awesome.min.css">
  <link ios-href="build/css/app.ios.css" rel="stylesheet">
  <link md-href="build/css/app.md.css" rel="stylesheet">



</head>

<body>
  <ion-app></ion-app>

  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
  <script src="lib/ngCordova/dist/ng-cordova.js"></script>
  <script src="cordova.js"></script>
  <script src="build/js/app.bundle.js"></script>
</body>

</html>

Answer 1

You should load polyfills (Chrome can run Angular without them): 您应该加载polyfill（Chrome可以在没有它们的情况下运行Angular）：

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>

Answer 2

Sasxa's answer helped me to solve this issue. Sasxa的回答帮助我解决了这个问题。 Although I tried to specify path it doesn't seems to find its resource. 尽管我尝试指定路径，但似乎找不到其资源。 Following resources helped me to get the answer. 以下资源帮助我获得了答案。 As Sasxa pointed out, Safari needs Intl polyfill. 正如Sasxa所指出的，Safari需要Intl polyfill。

I tried to install it using NPM and Bower it didn't work, finally I settle with using CDN location as it worked for me. 我尝试使用NPM来安装它，而Bower却没有用，最后我决定使用CDN位置，因为它对我有用。

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

例外：TypeError：未定义不是Ionic 2中的对象（评估“ pipe.constructor”）吗？

问题描述

2 个解决方案

解决方案1
2 2016-03-02 09:12:22

解决方案2
0 已采纳 2016-03-17 05:02:54

例外：TypeError：未定义不是Ionic 2中的对象（评估“ pipe.constructor”）吗？

问题描述

2 个解决方案

解决方案1 2 2016-03-02 09:12:22

解决方案2 0 已采纳 2016-03-17 05:02:54

解决方案1
2 2016-03-02 09:12:22

解决方案2
0 已采纳 2016-03-17 05:02:54