NPM issue with installing angular2-moment? Peer dependencies are problematic

snstarosciak · May 4, 2016, 2:39pm

Hey everyone, I’m trying to get the angular2-moment npm module installed in my Ionic 2 project from this source: https://github.com/urish/angular2-moment

But any time I try to install it, I get this error in my terminal:

npm install --save angular2-moment
npm WARN peerDependencies The peer dependency angular2@^2.0.0-beta.16 included from angular2-moment will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Darwin 15.4.0
npm ERR! argv "/Users/Stevie/.nvm/versions/node/v0.12.7/bin/node" "/Users/Stevie/.nvm/versions/node/v0.12.7/bin/npm" "install" "--save" "angular2-moment"
npm ERR! node v0.12.7
npm ERR! npm  v2.11.3
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package angular2 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer angular2-moment@0.6.0 wants angular2@^2.0.0-beta.16
npm ERR! peerinvalid Peer ionic-angular@2.0.0-beta.6 wants angular2@^2.0.0-beta.15
npm ERR! peerinvalid Peer fuel-ui@0.2.0 wants angular2@2.0.0-beta.17

npm ERR! Please include the following file with any support request:
npm ERR!     /Applications/MAMP/htdocs/umbrella-mobile/npm-debug.log

I’ve tried messing around with the package.json values and installing different versions of angular 2, but when I get either angular2-moment working, it breaks angular2, and vice versa.

Does anyone else have this issue? I love using moment.js and I remember how easy it was to use in Ionic 1. Any help would be nice

Thanks!

realino · May 4, 2016, 3:01pm

Also I had this problem. try using this package.json:

    "dependencies": {
        "angular2": "2.0.0-beta.16",
        "es6-shim": "^0.35.0",
        "ionic-angular": "2.0.0-beta.6",
        "ionic-native": "^1.1.1",
        "ionicons": "3.0.0-alpha.3",
        "ng2-translate": "^2.0.0",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.2",
        "zone.js": "^0.6.11"
      },
      "devDependencies": {
        "del": "2.2.0",
        "gulp": "3.9.1",
        "gulp-watch": "4.3.5",
        "run-sequence": "1.1.5"
      }

iignatov · May 4, 2016, 6:34pm

@realino @snstarosciak I would not recommend to update to Angular 2.0.0-beta.16. There are breaking changes affecting core Ionic 2 functionality (see this commit) so you might start experiencing various problems. Moreover there’s a bug in Angular 2 beta.16 which breaks the app and also a change detection regression.

aaronksaunders · May 4, 2016, 6:38pm

i just used moment without the directive…

realino · May 4, 2016, 7:24pm

Which version do you recommend?

rapropos · May 4, 2016, 7:42pm

If all you’re looking for is proper date formatting and timeago pipes using moment, you might find the second half of this thread useful.

iignatov · May 4, 2016, 7:45pm

I would recommend to stick with the version of Angular 2 used in ionic2-app-base.

snstarosciak · May 5, 2016, 5:47am

Ah thanks for the response here. I’m still kinda new to Ionic2/Angular2.

How do I get moment into my project if not through npm?
Do I just use the pipes as normal but need to import {MomentPipe} into my component?

mhartington · May 5, 2016, 3:55pm

You can create custom pipe and import moment like so

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

@Injectable()

@Pipe({ name: 'moment' })
export class MomentPipe {
  transform(value, args) {
    value = value + '';
    args = args + '';
    return moment(value).format(args)
  }
}

Then you can use it in your code like so.

{{session.start_time | moment:'dddd, h:mma'}}

snstarosciak · May 6, 2016, 3:59am

Thanks for the reply. So I’ve got the pipe all setup and everything but when I import it into my component and try to use it in the template, I get this error:

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
The pipe 'moment' could not be found ("pe-text-block">
        {{topicName}}&middot;
        <span class="post-type-text">Post added</span>[ERROR ->] &middot;
        {{post.date | moment:'dddd, h:mma'}}
      </span>
"): PostAdded@12:54
browser_adapter.ts:73 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
The pipe 'moment' could not be found ("pe-text-block">
        {{topicName}}&middot;
        <span class="post-type-text">Post added</span>[ERROR ->] &middot;
        {{post.date | moment:'dddd, h:mma'}}
      </span>
"): PostAdded@12:54BrowserDomAdapter.logError @ browser_adapter.ts:73BrowserDomAdapter.logGroup @ browser_adapter.ts:84ExceptionHandler.call @ exception_handler.ts:49(anonymous function) @ application_ref.ts:258schedulerFn @ async.ts:127SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:73EventEmitter.emit @ async.ts:113NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.ts:134NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.ts:88ZoneDelegate.handleError @ angular2-polyfills.js:394Zone.runGuarded @ angular2-polyfills.js:300drainMicroTaskQueue @ angular2-polyfills.js:554ZoneTask.invoke @ angular2-polyfills.js:493
browser_adapter.ts:73 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:73ExceptionHandler.call @ exception_handler.ts:52(anonymous function) @ application_ref.ts:258schedulerFn @ async.ts:127SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:73EventEmitter.emit @ async.ts:113NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.ts:134NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.ts:88ZoneDelegate.handleError @ angular2-polyfills.js:394Zone.runGuarded @ angular2-polyfills.js:300drainMicroTaskQueue @ angular2-polyfills.js:554ZoneTask.invoke @ angular2-polyfills.js:493
browser_adapter.ts:73 Error: Uncaught (in promise): Template parse errors:
The pipe 'moment' could not be found ("pe-text-block">
        {{topicName}}&middot;
        <span class="post-type-text">Post added</span>[ERROR ->] &middot;
        {{post.date | moment:'dddd, h:mma'}}
      </span>
"): PostAdded@12:54
    at resolvePromise (angular2-polyfills.js:602)
    at resolvePromise (angular2-polyfills.js:587)
    at angular2-polyfills.js:635
    at ZoneDelegate.invokeTask (angular2-polyfills.js:423)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.ts:54)
    at ZoneDelegate.invokeTask (angular2-polyfills.js:422)
    at Zone.runTask (angular2-polyfills.js:320)
    at drainMicroTaskQueue (angular2-polyfills.js:541)
    at XMLHttpRequest.ZoneTask.invoke (angular2-polyfills.js:493)BrowserDomAdapter.logError @ browser_adapter.ts:73ExceptionHandler.call @ exception_handler.ts:53(anonymous function) @ application_ref.ts:258schedulerFn @ async.ts:127SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:73EventEmitter.emit @ async.ts:113NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.ts:134NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.ts:88ZoneDelegate.handleError @ angular2-polyfills.js:394Zone.runGuarded @ angular2-polyfills.js:300drainMicroTaskQueue @ angular2-polyfills.js:554ZoneTask.invoke @ angular2-polyfills.js:493
angular2-polyfills.js:528 Unhandled Promise rejection: Template parse errors:
The pipe 'moment' could not be found ("pe-text-block">
        {{topicName}}&middot;
        <span class="post-type-text">Post added</span>[ERROR ->] &middot;
        {{post.date | moment:'dddd, h:mma'}}
      </span>
"): PostAdded@12:54 ; Zone: angular ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵The pipe 'moment' could not…'dddd, h:mma'}}↵      </span>↵"): PostAdded@12:54", stack: "Error: Template parse errors:↵The pipe 'moment' co…2.168.112.9:8100/build/js/app.bundle.js:28345:41)"}consoleError @ angular2-polyfills.js:528drainMicroTaskQueue @ angular2-polyfills.js:557ZoneTask.invoke @ angular2-polyfills.js:493
angular2-polyfills.js:530 Error: Uncaught (in promise): Template parse errors:(…)

This is what my code looks like:

import {Component, Input} from 'angular2/core';
import {NavController} from 'ionic-angular';
import {PostAddedDetailPage} from '../../pages/post-added-detail/post-added-detail';
import {TopicFeedPage} from '../../pages/topic-feed/topic-feed';
import {MomentPipe} from '../../pipes/moment';

@Component({
  selector: 'post-added',
  templateUrl: 'build/components/post-added/post-added.html',
})
export class PostAdded {
  @Input() post: any;
  title: string = '';
  topicDetail: any = {};
  topicName: string = '';

  constructor(private nav: NavController) {}

  goToFeedTopic() {
    this.nav.push(TopicFeedPage, this.post);
  }

  goToPost() {
    this.nav.push(PostAddedDetailPage, this.post);
  }

  ngOnInit() {
    this.title = this.post.title.replace(/(<([^>]+)>)/ig,"");
    // Pull the topic name out
    this.topicDetail = JSON.parse(this.post.details);
    this.topicName = this.topicDetail.topic.topicName;
    console.log(this.post);
  }
}

What am I missing?

rapropos · May 6, 2016, 5:21am

As with directives, you must declare all used pipes in your components. You need pipes: [MomentPipe] in your @Component decorator.

snstarosciak · May 27, 2016, 5:31am

You are seriously the best. I finally got around to messing with this again and your comment about adding the pipe made all the difference. Now I can use momentjs in my project