urish / ngx-moment Goto Github PK
View Code? Open in Web Editor NEWmoment.js pipes for Angular
License: MIT License
moment.js pipes for Angular
License: MIT License
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);```
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!
the details are here
http://stackoverflow.com/questions/37884709/angular-2-expression-has-changed-after-it-was-checked
Any fix?
Did:
import * as moment from 'moment';
moment.locale('he');
in my app module.ts
but locale doesn't change
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,
this seems nice! Is it possible to put it on bower?
Emmanuel
any plans to update angular2-moment to the current Release Candidate?
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
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 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.
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
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.
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
Hi,
Can you please update to @angular/2.0.0-rc.0?
Thank you!!
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()
?
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.
...like documented here: http://momentjs.com/docs/#/displaying/from/
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.
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
Is there a way to support internationalization currently?
Is there only the time ago pipe right now? Does this need contributions?
It's possible to use moment in portuguese, for example? How I can do that? Thanks!
Hi, could you update the release version to make DateFormatPipe available?
Is it possible to translate to another language the pipe output?
For example, changing "X Hours ago" to another language?
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"
}
],
}
Hey Guys,
❤️ I Love your work! Thank you :-)
Will you also support Multi Language?
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
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 developing an app that is international (English and French) and the dates are in English.
How to configure the language with this package ?
Thanks !
Can you please update to @angular/2.0.0-rc.4?
Thank you!! :)
Unfortunately this module is exposing the Typescript files directly when it should only be the JS files
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,
can you explain why?
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
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:
MomentModule
in the main modulenpm install --saveDev @angular/compiler-cli
package.json
: "extract": "ng-xi18n"
app.component.html
and add the i18n
attribute somewhere on some tag. E.g: <h1>App works!</h1>
to <h1 i18n>App works!</h1>
npm run extract
At this moment, releases ts source file is a good choose. but including angular2 module will break down the compatibility.
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?
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. 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 👍
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.
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.
san@san-work:~$ cd /tmp
[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
try it, it's makes alot of errors.
ionic 2 beta 6
if you success please tell me the steps to implement.
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
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?
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.
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?
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';
^
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?
I followed the instructions for the angular RC5 update but i get this in one of my templates.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.