Ionic 2 + angular 2 pipes issue


#1

Anyone know what version of angular2 the latest Ionic2 Beta uses? Im on ionic 2.0.0-beta.19 and its dependent on angular2 beta.6.

Right now pipes are a known issue in this version of angular - I’m hoping they might be fixed in newer versions of angular2 - or if anyone has already tested this potentially?

Cheers,
S


#2

beta.3 - Ionic
beta.11 -angular (ionic has zone.js issue with this version)
beta.9 - angular works fine.


#3

I just npm installed ionic@beta and im now on Ionic 2.0.0-beta.21
But Angular is still beta.6, how do I upgrade that dependency?

Thx!


#4

I would just edit package.json.


#5

Hey folks…so there seems to be some confusion on the package name.

Long story short

npm install -g ionic@beta

Installs the ionic-cli

npm install ionic-angular

Installs Ionic2 framework for angular.


#6

Well upgraded to latest Ionic@beta and latest angular beta.9 and date pipes still dont work when you emulate or preview the app on a device :frowning:

Thanks for the help installing.

I also had trouble installing angularfire2 - using npm install angularfire2 - I get:

npm ERR! angularfire2@2.0.0-alpha.12 postinstall:typings install; webdriver-manager updatenpm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the angularfire2@2.0.0-alpha.12 postinstall script 'typings install; webdriver-manager update'. npm ERR! This is most likely a problem with the angularfire2 package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! typings install; webdriver-manager update npm ERR! You can get their info via: npm ERR! npm owner ls angularfire2 npm ERR! There is likely additional logging output above.

Any ideas what causes this?


#7

IMHO, the stock date pipes are pretty much worthless because the format parameter doesn’t really work unless you’re using Dart. If you don’t mind adding a dependency on moment, it’s trivial to roll your own pipes with it that are more powerful:

import {Pipe, PipeTransform} from 'angular2/core';
import * as moment from 'moment';

@Pipe({
    name: 'moment',
    pure: false,
})
export class MomentPipe implements PipeTransform {
    transform(d:Date | moment.Moment, args?:any[]):string {
        let rv = moment(d).format(args[0]);
        return rv;
    }
}

@Pipe({
    name: 'timeago',
    pure: false,
})
export class TimeagoPipe implements PipeTransform {
    transform(d:Date | moment.Moment):string {
        let rv = moment(d).fromNow();
        return rv;
    }
}

As for your other problem, do you have typings installed?


Date Pipe does not apply format
NPM issue with installing angular2-moment? Peer dependencies are problematic
#8

@rapropos : thats a great idea to add moment. I’ve never used it but I’ll give it a shot! As for angularfire2, yes I have typings installed. Do I need a specific one for angularfire2?

Thanks for the help!


#9

Not sure, but if typings install; webdriver-manager update is failing, the first things I would check are that typings and webdriver-manager exist and are on your path.


#10

Thanks for the help - was able to figure out I needed to install: npm i webdriver-manager
Then I installed angularfire2 and im good now!


#11

@rapropos I’m having a bit of an issue learning how to import the moment library. I’ve installed it using npm, I’ve also installed the TYPED definitions for it as well, but when I import it at the top of the file like you pasted in your code above - I get a cannot find module error. I tried looking for a systems config in ionic to import the module that way, thats how I would do it in straight up angular 2 app, but I’m not seeing where to do that in the ionic files… Any suggestions?
Thanks!


#12

Can you share your tsconfig.json? Somehow tsc needs to know about the moment.d.ts, in files or filesGlob or something.


#13

Here is is - I also did
tsd install moment

and now angular is reading it correctly, but I’m still getting a type error saying it cant find the moment module. But when I change the path to moment to this:
import * as moment from '../node_modules/moment';

I dont get the notice - but then ionic wont work because it cant find that path…anyways thanks!

{ "compilerOptions": { "target": "es5", "module": "commonjs", "emitDecoratorMetadata": true, "experimentalDecorators": true }, "filesGlob": [ "**/*.ts", "!node_modules/**/*" ], "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ], "compileOnSave": false, "atom": { "rewriteTsconfig": false } }


#14

You shouldn’t need tsd. Maybe there is some issue with the gulp build system (I use webpack), but the code I pasted is directly from a working application.


#15

I looked at my typings config file and I had moment installed as ambient so I removed it. Re installed typings to latest version. Then reinstalled moment:

$ npm install --save moment $ typings install --save moment

And all is good now! Thanks for you help!!


#16

let me cry a moment
ok I’m said a few important

import {Pipe, PipeTransform} from '@angular/core';

example: https://angular.io/docs/ts/latest/guide/pipes.html # Custom Pipes