urish / ngx-moment Goto Github PK

I have installed package with npm (also for typescript) and getting console error:

Failed to load resource: http://localhost:5555/node_modules/moment/package.json the server responded with a status of 404 (Not Found)

I can see the package inside of node_modules with name angular2-moment.

Here are my parts of code:

import { DateFormatPipe } from 'angular2-moment';
{{meeting.scheduled.start | amDateFormat:'LL'}}

What could be wrong?

In moment.js documentation, we are allowed to specify the data format in case the date isn't ISO 8601 formated.

Is it possible to implement this?

Hello @urish
thanks for this package. I have a user-list where deeply nested the property of the date value is stored:
user.state.lastLogin.date. Inside the ngFor not all dates are set - is it possible to set the undefined string to "" as empty string? Thanks

It's possible to use moment in portuguese, for example? How I can do that? Thanks!

How do you use angular2-moment with an Angular-CLI generated application? I am getting the following errors after npm installing angular2-moment and importing a pipe:

[DiffingTSCompiler]: Typescript found the following errors:
node_modules/angular2-moment/CalendarPipe.ts (4, 25): Cannot find module 'moment'.
node_modules/angular2-moment/DateFormatPipe.ts (4, 25): Cannot find module 'moment'.
node_modules/angular2-moment/TimeAgoPipe.ts (4, 25): Cannot find module 'moment'.

When trying to run 'typings install --save moment' I get the following the error:

-bash: typings: command not found

Hi,

Is it possible to add a very neat seed that only includes angular2-moment (systemjs) because I cannot install it as I get dozen of errors. Some of the errors:

Cannot find module 'moment'.

File 'C:/GIT/TestProj/TestProj.Web/node_modules/angular2-moment/TimeAgoPipe.ts' is not under 'rootDir' 'C:/GIT/TestProj/TestProj.Web/wwwroot/app'. 'rootDir' is expected to contain all source files.

It is a pain in general words. A clear seed would highly appreciated

Hey Guys,
❤️ I Love your work! Thank you :-)

Will you also support Multi Language?

Hi. As in readme, I've installed angular2-moment. It works perfect. The problem I'm having is, that I'm using the pipe in @Component:

<ion-card class="single-tweet">

  <ion-item>
    <ion-avatar item-left>
      <img src="{{tweet.user.profile_image_url_https}}">
    </ion-avatar>
    <ion-note item-right class="time">
      {{tweet.unixtime | amTimeAgo}}
    </ion-note>
    <div class="name">{{tweet.user.name}}</div>
    <small class="screen-name">@{{tweet.user.screen_name}}</small>
  </ion-item>

</ion-card>

I use this component on ListAll page. When clicking single ion-card, I'm jumping to details page, where I'm again using component above. If, in the meantime I update my tweet variable, I'll then get this error:

browser_adapter.js:76 EXCEPTION: Expression '
      {{tweet.unixtime | amTimeAgo}}
     in SingleTweet@7:38' has changed after it was checked. Previous value: '39 minutes ago'. Current value: '40 minutes ago' in [
      {{tweet.unixtime | amTimeAgo}}
     in SingleTweet@7:38]

and then:

TypeError: Cannot read property 'removeEventListener' of undefined
    at Content.ngOnDestroy (content.js:79)
    at AbstractChangeDetector.ChangeDetector_DetailPage_0.dehydrateDirectives (viewFactory_DetailPage:81)
    at AbstractChangeDetector.dehydrate (abstract_change_detector.js:141)
    at AbstractChangeDetector.destroyRecursive (abstract_change_detector.js:158)
    at AbstractChangeDetector.destroyRecursive (abstract_change_detector.js:165)
    at AppView.destroy (view.js:111)
    at AppViewManager_.destroyViewInContainer (view_manager.js:124)
    at ViewContainerRef_.remove (view_container_ref.js:116)
    at Array.<anonymous> (nav-controller.js:1108)
    at ViewController.destroy (view-controller.js:420)

Should I in between somehow disable timeago when I do the update? Any help would be perfect 👍

Can you please update to @angular/2.0.0-rc.4?

Thank you!! :)

As soon as I use an import-statement to include a file as a pipe, my build scripts stop working properly.
If my code is in /src, and I want everything inside /src to be compiled to /public it works as expected without an import.
So for example, /src/test.ts becomes /public/test.{map.}js.
As soon as I import this module, it adds another directory (the src directory)
So /src/test.ts becomes /public/src/test.{map.}js suddenly...

Other projects seem to have similar problems. See this issue from ng2-bootstrap: valor-software/ngx-bootstrap#128

Here is a Stackoverflow question, describing the very same problem I have (also, for ng2-bootstrap)
http://stackoverflow.com/questions/35648347/importing-ng2-bootstrap-changes-my-tsc-output-directory-structure

I hope this gets fixed soon, as I cant use this module if it messes up my whole directory structure...

Edit: I can confirm that this issue gets fixed if .ts (not .d.ts) files are moved into a separate directory

Hi,

this seems nice! Is it possible to put it on bower?

Emmanuel

I'm trying to convert an app using ng-upgrade from angular1 to angular2, and I noticed that adding the amTimeAgo pipe to one of my pages completely kills the performance.

The pipe is used in a section that is below a *ngFor. Upon JS profiling, I noticed that the transform method of this pipe is being called repeatedly, every tick, completely killing performance for the page.

I stepped through the code trying various things, and setting the pipe as pure fixes this, but it probably kills the dynamic update functionality.

Any ideas what could be wrong?

Hello,

the locale('de') not working

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

// TODO: Move to another file
const momentConstructor: (value?: any) => moment.Moment = (<any>moment).default || moment;

@Pipe({
    name: 'dateFormat'
})
export class DateFormatPipe implements PipeTransform {
    public transform(date: any, args: any): any {
        let dateDE = momentConstructor(date).locale("de");
        return momentConstructor(date).locale("de").fromNow();
    }
}

Regards cvett

The prefixing of pipes with 'am' seems unnecessary, given pipes are included explicitly in components. Additionally, given the word 'am' is relevant to time already, it is confusing/misleading.

Also, dat's 2 xtra chars u got 2 typ.

Hi, could you update the release version to make DateFormatPipe available?

Hi, great module, but was having trouble getting it to work with angular2-seed (https://github.com/mgechev/angular2-seed) out-of-the-box. I was getting a 404 error when SystemJS was trying to find moment. For anyone using angular2-seed, and for @urish, only 1 line is needed to get it to work:

In tools/config/seed.config.ts, line 87, add the line between the comments:

  protected SYSTEM_CONFIG_DEV = {
    defaultJSExtensions: true,
// ADD THIS LINE
    packageConfigPaths: [`${this.APP_BASE}node_modules/*/package.json`],
//
    paths: {
      [this.BOOTSTRAP_MODULE]: `${this.APP_BASE}${this.BOOTSTRAP_MODULE}`,
      'angular2/*': `${this.APP_BASE}angular2/*`,
      'rxjs/*': `${this.APP_BASE}rxjs/*`,
      '*': `${this.APP_BASE}node_modules/*`
    },
    packages: {
      angular2: { defaultExtension: false },
      rxjs: { defaultExtension: false }
    }
  };

I'll post this in angular2-seed as well, since other modules may encounter the same issue.

Hi!

I'm trying use the moment and set the locale, but the language isn't changing.
I set the language, as below:

moment.locale('pt-BR');

But the output is:

a few seconds ago

Version of Angular2-moment: 0.4.3
What I need do to work?

Hi,

This is not really an issue, but it's the easiest way to get in contact with you - sorry about that :-).

I am one of the maintainers of Moment.js.
I want to make you aware of moment/moment-rfcs#2. This proposes adding a second immutable API to Moment.js for V3. We are quite serious about moving forward with this one, and are already in the process of prototyping code and seeing up the repo for this kind of change. Because being able to have both immutable and mutable objects coming from Moment will affect libraries that depend on it, like this one, I want to give you a heads up and ask you to add any comments you feel would be helpful.

There's also an executive summary of what's going on on my blog, if you don't want to read the whole thing: https://maggiepint.com/2016/07/16/immutability-its-happening/

We would greatly appreciate hearing what you think.

Maggie

Hi,

Can you please update to @angular/2.0.0-rc.0?

Thank you!!

Thanks for the work of this lib.

Will timezone feature support in the future? Ideally, we can set timezone once instead of passing the timezone setting every time we used this lib.

Currently, if the input is "2016-05-23T00:39:23.610812Z" and the local time is 21:39, this lib does not show correctly because time zone feature has not been implemented. In Angular 1, everything is fine.

Thanks.

I want to use the to() function to do in x days in x months etc. Is it being worked on? Or should I duplicate TimeAgoPipe.ts and change from() to to()?

do you have a working systemjs config for Angular2?

have to admit i am not too great with it and following #11 didnt help out either :/

i basically tried to just import it like any other module

//map block
'angular2-moment': '/node_modules/angular2-moment/'
//when referencing /module.js it seems to load the module but cant find any submodule i.e. CalendarPipe.js etc...

//packages block
'angular2-moment': { defaultExtension: 'js' }
//do i need the meta block here like in #11 ??

//wrapping up the config 
var config = {
    map: map,
    packages: packages
};

System.config(config);```

I am using angular2-moment with ionic2.Its giving me error
EXCEPTION: Error: Uncaught (in promise): No Pipe decorator found on TimeAgoPipe.

I import TimeAgoPipe as
import {TimeAgoPipe} from "angular2-moment/TimeAgoPipe.js";
Or
import {TimeAgoPipe} from "angular2-moment";

i both situation i m getting error

Implementing this code example:

import {TimeAgoPipe} from 'angular2-moment';
@Component({
  selector: 'app',
  pipes: [TimeAgoPipe],
  template: `
    Last updated: <time>{{myDate | amTimeAgo}}</time>`
})

throws this error:

CONSOLE LOG file:///app/tns_modules/@angular/core/src/facade/lang.js:345:16: ORIGINAL E
XCEPTION: ReferenceError: Can't find variable: window

where is the problem?

I'm trying to use this module, however my typescript stops transcribing after adding it, with the following message:

[0] node_modules/angular2-moment/TimeAgoPipe.d.ts(1,1): error TS2654: Exported external package typings file cannot contain tripleslash references. Please contact the package author to update the package definition.

Using Angular2 Beta.0

At this moment, releases ts source file is a good choose. but including angular2 module will break down the compatibility.

https://angular.io/docs/ts/latest/guide/ngmodule.html

It would be great if the amDateFormat pipe or all pipes accept an unix timestamp(seconds) by argument configuration.

For example:
{{1456263980 | amDateFormat: ['hh:mmA', true]}} -> 13:45PM
true means input is unix timestamp

Hi,
I'm developing an app that is international (English and French) and the dates are in English.
How to configure the language with this package ?

Thanks !

any plans to update angular2-moment to the current Release Candidate?

i used ionic 2 and angular2 for build app.

im run npm install --save angular2-moment
and i add import {TimeAgoPipe} from 'angular2-moment';
pipes: [TimeAgoPipe],
for file .js
but it error
Module parse failed: D:\xampp\htdocs\1000ngayvang_app\node_modules\angular2-mome
nt\TimeAgoPipe.ts Line 3: Unexpected token
You may need an appropriate loader to handle this file type.

Is there a way to support internationalization currently?

san@san-work:~$ cd /tmp

san@san-work:/tmp$ npm install angular2-moment

[email protected] postinstall /tmp/node_modules/angular2-moment
typings install

typings ERR! message Unable to resolve Typings dependencies
typings ERR! caused by Unable to find "typings.json" from "/tmp/node_modules/angular2-moment"

typings ERR! cwd /tmp/node_modules/angular2-moment
typings ERR! system Linux 3.16.0-60-generic
typings ERR! command "/usr/bin/nodejs" "/usr/lib/node_modules/typings/dist/bin/typings-install.js"
typings ERR! node -v v0.12.10
typings ERR! typings -v 0.6.8

typings ERR! If you need help, you may report this error at:
typings ERR! https://github.com/typings/typings/issues

npm ERR! Linux 3.16.0-60-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install" "angular2-moment"
npm ERR! node v0.12.10
npm ERR! npm v2.14.9
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: typings install
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'typings install'.
npm ERR! This is most likely a problem with the angular2-moment package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! typings install
npm ERR! You can get their info via:
npm ERR! npm owner ls angular2-moment
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /tmp/npm-debug.log
san@san-work:/tmp$

/tmp/npm-debug.log here https://drive.google.com/file/d/0B5sf8URbEXr8NTQxRVk4X1hremc/view?usp=sharing

I would like to see http://momentjs.com/docs/#/displaying/fromnow/ implemented, is there a special reason why it is not supported, yet? Otherwise, I could work on a PR for that.

Bug description

I localized my app using the i18n attribute in a html tag. When I try to execute ng-xi18n, I get the following error:

Error: Unexpected value 'MomentModule' imported by the module 'AppModule'
    at /home/chris/workspace/my-webclient/node_modules/@angular/compiler/bundles/compiler.umd.js:14118:37
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (/home/chris/workspace/my-webclient/node_modules/@angular/compiler/bundles/compiler.umd.js:14103:46)
    at /home/chris/workspace/my-webclient/node_modules/@angular/compiler/bundles/compiler.umd.js:12947:58
    at Array.forEach (native)
    at OfflineCompiler.analyzeModules (/home/chris/workspace/my-webclient/node_modules/@angular/compiler/bundles/compiler.umd.js:12946:21)
    at Extractor.extract (/home/chris/workspace/my-webclient/node_modules/@angular/compiler-cli/src/extract_i18n.js:92:47)
    at extract (/home/chris/workspace/my-webclient/node_modules/@angular/compiler-cli/src/extract_i18n.js:16:35)
    at Object.main (/home/chris/workspace/my-webclient/node_modules/@angular/compiler-cli/node_modules/@angular/tsc-wrapped/src/main.js:30:16)
    at Object.<anonymous> (/home/chris/workspace/my-webclient/node_modules/@angular/compiler-cli/src/extract_i18n.js:161:9)
Extraction failed

This seems to be strongly related: yabab-dev/ng2-ckeditor#36
Obviously compiler-cli expects a .metadata.json or something. Would be great if you could take a look at this.

To reproduce:

1. Create a new angular project
2. Import the MomentModule in the main module
3. npm install --saveDev @angular/compiler-cli
4. Add a script in package.json: "extract": "ng-xi18n"
5. Open app.component.html and add the i18n attribute somewhere on some tag. E.g: <h1>App works!</h1> to <h1 i18n>App works!</h1>
6. On project root, run npm run extract
7. You should now get the error

Unfortunately this module is exposing the Typescript files directly when it should only be the JS files

I got the following error which I guess is related to the angular-moment pipe:

ORIGINAL EXCEPTION: Expression has changed after it was checked. Previous value: '
          (session expires in 21 minutes)
        '. Current value: '
          (session expires in 20 minutes)

Ad hoc any ideas? I will later debug in more depth and add some context.

hi I'm struggling after moving to angular2 beta12

 ✗ TypeScript error: /xxxx/node_modules/angular2-moment/CalendarPipe.ts(49,7): Error TS2322: Type 'EventEmitter<{}>' is not assignable to type 'EventEmitter<Date>'.
  Type '{}' is not assignable to type 'Date'.
    Property 'toDateString' is missing in type '{}'.
 ✗
/xxxxx/node_modules/angular2-moment/TimeAgoPipe.ts:3
import {Pipe, ChangeDetectorRef, PipeTransform, OnDestroy} from 'angular2/core';
^

Current the peer dependencies target a fixed Angular rc.0 reference, which makes it such that this package can't be used in the latest version of Ionic 2, which targets RC 4. Or, better yet, make this an unfixed peer dependency so there won't be conflicts in the future (if that's possible).

Thanks!

I followed the instructions for the angular RC5 update but i get this in one of my templates.

the details are here
http://stackoverflow.com/questions/37884709/angular-2-expression-has-changed-after-it-was-checked

Any fix?

Is it possible to translate to another language the pipe output?

For example, changing "X Hours ago" to another language?

Is there only the time ago pipe right now? Does this need contributions?

...like documented here: http://momentjs.com/docs/#/displaying/from/

try it, it's makes alot of errors.
ionic 2 beta 6

if you success please tell me the steps to implement.

When is use amTimeAgo in template I have an error:

node_modules/angular2-moment/TimeAgoPipe.ts:3
import {Pipe, ChangeDetectorRef, PipeTransform, OnDestroy} from 'angular2/core';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

My package.js

{
  "dependencies": {
    "angular2": "2.0.0-beta.6",
    "angular2-moment": "^0.4.3",
    "es6-promise": "3.0.2",
    "es6-shim": "^0.33.13",
    "ionic-angular": "2.0.0-beta.3",
    "ionic-native": "^1.1.0",
    "ionicons": "3.0.0-alpha.3",
    "lodash": "^4.0.1",
    "moment": "^2.11.1",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.14"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "^1.0.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^1.0.0"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard",
    "cordova-plugin-statusbar"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
}

Hello, is there anyway you can add some license so that I can use the code in my project? Preferably something permissive like MIT license.

The installation instructions are probably not enough (at least they were not enough for me). SystemJS does not know about angular2-moment and thus it doesn't work when it tries to load it at run time.

I had to add the following to the config object:

System.config({
  packages: {
    ... other packages here
,
    "angular2-moment": {
      main: "index.js",
      defaultExtension: 'js'
    }
  },
  map: {
    "angular2-moment": "/node_modules/angular2-moment",
  },
  paths: {
    "moment": "/node_modules/moment/moment.js"
  }
});

I am not an expert in systemJS or angular2 for that matter so If there is an easier way or if this was just localized to my installation then please tell me.

Did:

import * as moment from 'moment';
moment.locale('he');

in my app module.ts
but locale doesn't change

on the demo url: http://plnkr.co/edit/ziBJ0mftSjnz0SrYPwbo?p=preview
if I replace "angular2-moment": "https://rawgit.com/urish/angular2-moment/0.6.0" with either of the following, none of them works,

1. "angular2-moment": "//cdn.rawgit.com/urish/angular2-moment/master"
2. "angular2-moment": "//rawgit.com/urish/angular2-moment/master"
3. "angular2-moment": "//raw.githubusercontent.com/urish/angular2-moment/master"

can you explain why?