Ionic 2 + angular 2 pipes issue

Ionic Framework ionic-v3
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?

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.

1 Like
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