typescript - ngx - moment js angular 6
¿Cómo utilizar la biblioteca moment.js en la aplicación de mecanografía angular 2? (23)
Además de la respuesta de SnareChop, tuve que cambiar el archivo de tipificación por momentos.
En
moment-node.d.ts
reemplacé:
export = moment;
con
export default moment;
Traté de usarlo con enlaces de mecanografía:
npm install moment --save
typings install moment --ambient -- save
test.ts:
import {moment} from ''moment/moment'';
Y sin:
npm install moment --save
test.ts:
var moment = require(''moment/moment'');
Pero cuando llamo moment.format (), recibo un error. Debería ser simple, ¿alguien puede proporcionar una combinación de línea de comando / importación que funcione?
Con systemjs lo que hice es, dentro de mi systemjs.config agregué mapa por un
moment
map: {
.....,
''moment'': ''node_modules/moment/moment.js'',
.....
}
Y luego puede importar fácilmente el
moment
simplemente haciendo
import * as moment from ''moment''
Estamos usando módulos ahora,
intente
import {MomentModule} from ''angular2-moment/moment.module'';
después de
npm install angular2-moment
Intente agregar
"allowSyntheticDefaultImports": true
a su
tsconfig.json
.
¿Qué hace la bandera?
Básicamente, esto le dice al compilador TypeScript que está bien usar una declaración de importación ES6, es decir
import * as moment from ''moment/moment'';
en un módulo CommonJS como Moment.js que no declara una exportación predeterminada. El indicador solo afecta a la verificación de tipos, no al código generado.
Es necesario si usa SystemJS como su cargador de módulos. El indicador se activará automáticamente si le dice a su compilador de TS que usa SystemJS:
"module": "system"
Esto también eliminará cualquier error generado por los IDE si están configurados para utilizar
tsconfig.json
.
La biblioteca angular2-moment tiene tuberías como {{myDate | amTimeAgo}} para usar en archivos .html.
También se puede acceder a esas mismas canalizaciones como funciones de mecanografía dentro de un archivo de clase de componente (.ts). Primero instale la biblioteca como se indica:
npm install --save angular2-moment
En node_modules / angular2-moment ahora habrá archivos ".pipe.d.ts" como calendar.pipe.d.ts , date-format.pipe.d.ts y muchos más.
Cada uno de ellos contiene el nombre de la función de mecanografía para la tubería equivalente, por ejemplo, DateFormatPipe () es la función para amDateFormatPipe .
Para usar DateFormatPipe en su proyecto, impórtelo y agréguelo a sus proveedores globales en app.module.ts:
import { DateFormatPipe } from "angular2-moment";
.....
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, ...., DateFormatPipe]
Luego, en cualquier componente donde desee utilizar la función, impórtelo en la parte superior, inyecte en el constructor y use:
import { DateFormatPipe } from "angular2-moment";
....
constructor(......., public dfp: DateFormatPipe) {
let raw = new Date(2015, 1, 12);
this.formattedDate = dfp.transform(raw, ''D MMM YYYY'');
}
Para usar cualquiera de las funciones, siga este proceso. Sería bueno si hubiera una forma de obtener acceso a todas las funciones, pero ninguna de las soluciones anteriores funcionó para mí.
Lo siguiente funcionó para mí.
Primero, instale las definiciones de tipo por el momento.
typings install moment --save
(Nota: NO
--ambient
)
Luego, para evitar la falta de una exportación adecuada:
import * as moment from ''moment'';
Lo siguiente funcionó para mí:
typings install dt~moment-node --save --global
El nodo de momento no existe en el repositorio de tipings. Debe redirigir a Definitely Typed para que funcione con el prefijo dt.
Mi propia versión de usar Moment in Angular
npm i moment --save
import * as _moment from ''moment'';
...
moment: _moment.Moment = _moment();
constructor() { }
ngOnInit() {
const unix = this.moment.format(''X'');
console.log(unix);
}
Primero importe el momento como
_moment
, luego declare la variable de
moment
con el tipo
_moment.Moment
con un valor inicial de
_moment()
.
La importación simple de momento no le dará ninguna finalización automática, pero si declara el momento con la interfaz tipo
Moment
desde el espacio de nombres
_moment
desde
''moment''
paquete
''moment''
inicializado con el espacio de nombres de momento invocado
_moment()
le da la finalización automática de la API del momento.
Creo que esta es la forma más angular de usar el momento sin usar los
@types
typings
o los proveedores angulares, si está buscando la finalización automática de bibliotecas JavaScript de vainilla como momento.
Moment.js ahora es compatible con TypeScript en v2.14.1.
Para Angular 7+ (también admite 8) :
1: Instalar momento por comando
npm install moment --save
2: No agregue nada en
app.module.ts
3: Simplemente agregue la declaración de importación en la parte superior de su
component
o cualquier otro archivo como este:
import * as moment from ''moment'';
4: Ahora puede usar
moment
en cualquier parte de su código.
Al igual que:
myDate = moment(someDate).format(''MM/DD/YYYY HH:mm'');
Para usarlo en un proyecto
Typescript
, necesitará instalar moment:
npm install moment --save
Después de instalar moment, puede usarlo en cualquier archivo
.ts
después de importarlo:
import * as moment from "moment";
Sé que es un hilo viejo, pero para mí la solución más simple que realmente funcionó fue:
-
Instalarlo en primer
npm install moment --save - En mis componentes que lo requieren de node_modules y lo uso:
const moment = require(''../../../node_modules/moment/moment.js'');
@Component({...})
export class MyComponent {
...
ngOnInit() {
this.now = moment().format();
}
...
}
Seguí los consejos para permitir allowSyntheticDefaultImports (ya que no hay exportación de momento para usar), usando System. Luego seguí el consejo de alguien para usar:
import moment from ''moment'';
Con el momento asignado en mi configuración system.js. Las otras declaraciones de importación no funcionarían para mí, por alguna razón
Si está de acuerdo en agregar más paquetes de terceros, utilicé la biblioteca angular2-moment . La instalación fue bastante sencilla, y debe seguir las últimas instrucciones en el archivo README. También instalé typings como resultado de esto.
Funcionó como un encanto para mí, y apenas agregué ningún código para que funcione.
Sin embargo, no estoy seguro de si esto sigue siendo un problema para las personas ... Al usar SystemJS y MomentJS como biblioteca, esto me resolvió
/*
* Import Custom Components
*/
import * as moment from ''moment/moment''; // please use path to moment.js file, extension is set in system.config
// under systemjs, moment is actually exported as the default export, so we account for that
const momentConstructor: (value?: any) => moment.Moment = (<any>moment).default || moment;
Funciona bien desde allí para mí.
Yo iría con lo siguiente:
npm install moment --save
A la
systemjs.config.js
de
map
su archivo
systemjs.config.js
agregue:
''moment'': ''node_modules/moment''
a la matriz de
packages
agregue:
''moment'': { defaultExtension: ''js'' }
En su component.ts use:
import * as moment from ''moment/moment'';
y eso es. Puede usar desde la clase de su componente:
today: string = moment().format(''D MMM YYYY'');
con ng CLI
> npm install moment --save
en app.module
import * as moment from ''moment'';
providers: [{ provide: ''moment'', useValue: moment }]
en componente
constructor(@Inject(''moment'') private moment)
así importas momento una vez
ACTUALIZACIÓN Angular => 5
{
provide: ''moment'', useFactory: (): any => moment
}
Para mí trabaja en prod con aot y también con universal
No me gusta usar ninguno, pero usar momento. Momento que obtuve
Error Typescript Type ''typeof moment'' is not assignable to type ''Moment''. Property ''format'' is missing in type ''typeof moment''.
para angular2 RC5 esto funcionó para mí ...
primer momento de instalación a través de npm
npm install moment --save
Luego importe el momento en el componente que desea usar
import * as moment from ''moment'';
finalmente configure el momento en systemjs.config.js "mapa" y "paquetes"
// map tells the System loader where to look for things
var map = {
....
''moment'': ''node_modules/moment''
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
...
''moment'': { main:''moment'', defaultExtension: ''js''}
};
para angular2 con systemjs y jspm tenía que hacer:
import * as moment_ from ''moment'';
export const moment = moment_["default"];
var a = moment.now();
var b = moment().format(''dddd'');
var c = moment().startOf(''day'').fromNow();
moment
es un recurso global de terceros.
El momento en que el objeto vive en la
window
del navegador.
Por lo tanto, no es correcto
import
en su aplicación angular2.
En su lugar, incluya la etiqueta
<script>
en su html que cargará el archivo moment.js.
Para hacer feliz a TypeScript, puede agregar
declare var moment: any;
en la parte superior de sus archivos donde lo usa para detener los errores de compilación, o puede usar
///<reference path="./path/to/moment.d.ts" />
o use tsd para instalar el archivo moment.d.ts que TypeScript podría encontrar por sí mismo.
Ejemplo
import {Component} from ''angular2/core'';
declare var moment: any;
@Component({
selector: ''example'',
template: ''<h1>Today is {{today}}</h1>''
})
export class ExampleComponent{
today: string = moment().format(''D MMM YYYY'');
}
Solo asegúrese de agregar la etiqueta de script en su html o el momento no existirá.
<script src="node_modules/moment/moment.js" />
moment
carga del módulo
Primero, necesitaría configurar un cargador de módulos como System.js para cargar los archivos commonjs del momento
System.config({
...
packages: {
moment: {
map: ''node_modules/moment/moment.js'',
type: ''cjs'',
defaultExtension: ''js''
}
}
});
Luego, para importar el momento en el archivo donde sea necesario, use
import * as moment from ''moment'';
o
import moment = require(''moment'');
EDITAR:
También hay opciones con algunos paquetes como Webpack o SystemJS Builder o Browserify que mantendrán el momento alejado del objeto de la ventana. Para obtener más información sobre estos, visite sus respectivos sitios web para obtener instrucciones.
--- Actualización 11/01/2017
Typings ahora está en desuso y fue reemplazado por npm @types . A partir de ahora, obtener declaraciones de tipo no requerirá herramientas aparte de npm. Para usar Moment no necesitará instalar las definiciones de tipo a través de @types porque Moment ya proporciona sus propias definiciones de tipo.
Por lo tanto, se reduce a solo 3 pasos:
1 - Instalar momento que incluye las definiciones de tipo:
npm install moment --save
2 - Agregue la etiqueta de script en su archivo HTML:
<script src="node_modules/moment/moment.js" />
3 - Ahora puedes usarlo. Período.
today: string = moment().format(''D MMM YYYY'');
--- Respuesta original
Esto se puede hacer en solo 3 pasos:
1 - Instalar definición de momento - archivo * .d.ts :
typings install --save --global dt~moment dt~moment-node
2 - Agregue la etiqueta de script en su archivo HTML:
<script src="node_modules/moment/moment.js" />
3 - Ahora puedes usarlo. Período.
today: string = moment().format(''D MMM YYYY'');
Actualización de abril de 2017:
A partir de la versión 2.13.0, Moment incluye un archivo de definición de mecanografiado. https://momentjs.com/docs/#/use-it/typescript/
Simplemente instálelo con npm, en su tipo de consola
npm install --save moment
Y luego, en su aplicación Angular, importar es tan fácil como esto:
import * as moment from ''moment'';
Eso es todo, ¡obtienes soporte completo de Typecript!
Edición de bonificación:
para escribir una variable o propiedad como
Moment
en Typecript, puede hacer esto, por ejemplo:
let myMoment: moment.Moment = moment("someDate");
Para usuarios de CLI ANGULAR
El uso de bibliotecas externas se encuentra en la documentación aquí:
https://github.com/angular/angular-cli/wiki/stories-third-party-lib
Simplemente instale su biblioteca a través de
npm install lib-name --save
e impórtalo en tu código. Si la biblioteca no incluye tipings, puede instalarlos usando:
npm install lib-name --save
npm install @ types / lib-name --save-dev
Luego abra src / tsconfig.app.json y agréguelo a la matriz de tipos:
"tipos": ["nombre-lib"]
Si la biblioteca para la que agregó tipings solo se utilizará en sus pruebas de e2e, utilice e2e / tsconfig.e2e.json. Lo mismo ocurre con las pruebas unitarias y src / tsconfig.spec.json.
Si la biblioteca no tiene tipings disponibles en @ types /, aún puede usarla agregando manualmente tipings para ella:
Primero, cree un archivo typings.d.ts en su carpeta src /.
Este archivo se incluirá automáticamente como definición de tipo global. Luego, en src / typings.d.ts, agregue el siguiente código:
declara el módulo ''typeless-package'';
Finalmente, en el componente o archivo que usa la biblioteca, agregue el siguiente código:
import * como typelessPackage de ''typeless-package''; typelessPackage.method ();
Hecho. Nota: es posible que necesite o le resulte útil definir más tipificaciones para la biblioteca que está intentando usar.