Angular 2 Typescript 앱에서 moment.js 라이브러리를 사용하는 방법은 무엇입니까?

typescript 바인딩과 함께 사용하려고했습니다.

npm install moment --save
typings install moment --ambient -- save

test.ts :

import {moment} from 'moment/moment';

그리고없이 :

npm install moment --save

test.ts :

var moment = require('moment/moment');

그러나 moment.format ()을 호출하면 오류가 발생합니다. 간단해야합니까, 누구나 작동하는 명령 줄 / 가져 오기 조합을 제공 할 수 있습니까?

2017 년 4 월 업데이트 :

버전 2.13.0부터 Moment에는 유형 스크립트 정의 파일이 포함되어 있습니다. https://momentjs.com/docs/#/use-it/typescript/

콘솔 유형으로 npm으로 설치하십시오.

npm install --save moment

그런 다음 Angular 앱에서 가져 오기는 다음과 같이 쉽습니다.

import * as moment from 'moment';

그게 다야, Typescript를 완벽하게 지원합니다!

보너스 편집 :Moment Typescript에서 와 같이 변수 또는 속성을 입력하려면 다음과 같이하십시오 :

let myMoment: moment.Moment = moment("someDate");

moment타사 글로벌 리소스입니다. 모멘트 객체 window가 브라우저에 있습니다. 따라서 importangular2 애플리케이션에서 올바르지 않습니다 . 대신 <script>moment.js 파일을로드 할 태그를 HTML에 포함 하십시오.

TypeScript를 행복하게하려면 추가 할 수 있습니다

declare var moment: any;

파일 상단에서 컴파일 오류를 중지하는 데 사용하거나

///<reference path="./path/to/moment.d.ts" />

또는 tsd를 사용하여 TypeScript가 자체적으로 찾을 수있는 moment.d.ts 파일을 설치하십시오.

예

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');
}

HTML에 스크립트 태그를 추가하십시오. 그렇지 않으면 순간이 존재하지 않습니다.

<script src="node_modules/moment/moment.js" />

모듈 로딩 moment

먼저 moment.js 파일을로드하려면 System.js와 같은 모듈 로더를 설정해야 합니다.

System.config({
    ...
    packages: {
        moment: {
            map: 'node_modules/moment/moment.js',
            type: 'cjs',
            defaultExtension: 'js'
        }
    }
});

그런 다음 필요한 순간에 파일로 순간을 가져옵니다.

import * as moment from 'moment';

또는

import moment = require('moment');

편집하다:

Webpack, SystemJS 빌더 또는 Browserify와 같은 일부 번 들러에는 창 오브젝트에서 벗어나는 옵션도 있습니다. 이에 대한 자세한 내용은 해당 웹 사이트를 방문하여 지시하십시오.

다음은 나를 위해 일했습니다.

먼저 유형 정의를 설치하십시오.

typings install moment --save

(참고 : NOT --ambient)

그런 다음 적절한 수출 부족 문제를 해결하려면 다음을 수행하십시오.

import * as moment from 'moment';

나는 다음과 같이 갈 것이다.

npm install moment --save

당신으로 systemjs.config.js파일의 map배열 추가 :

'moment': 'node_modules/moment'

에 packages배열 추가 :

'moment': { defaultExtension: 'js' }

component.ts에서 다음을 사용하십시오. import * as moment from 'moment/moment';

그리고 그게 다야. 컴포넌트 클래스에서 사용할 수 있습니다.

today: string = moment().format('D MMM YYYY');

우리는 지금 모듈을 사용하고 있습니다.

시험 import {MomentModule} from 'angular2-moment/moment.module';

후 npm install angular2-moment

http://ngmodules.org/modules/angular2-moment

Typescript프로젝트 에서 사용 하려면 순간을 설치해야합니다.

npm install moment --save

설치 후, .ts파일을 가져온 후 모든 파일 에서 사용할 수 있습니다 .

import * as moment from "moment";

--- 업데이트 11/01/2017

타이핑 은 더 이상 사용되지 않으며 npm @types 로 대체되었습니다 . 이제부터는 형식 선언을 얻는 데 npm 외에 다른 도구가 필요하지 않습니다. Moment를 사용하려면 이미 자체 유형 정의를 제공하므로 @types를 통해 유형 정의를 설치할 필요가 없습니다 .

따라서 3 단계로 줄어 듭니다.

1-유형 정의가 포함 된 설치 모멘트 :

npm install moment --save

2-HTML 파일에 스크립트 태그를 추가하십시오.

<script src="node_modules/moment/moment.js" />

3-이제 그냥 사용할 수 있습니다. 기간.

today: string = moment().format('D MMM YYYY');

--- 원래 답변

이 작업은 3 단계 만 거치면됩니다.

1-설치 모멘트 정의- * .d.ts 파일 :

typings install --save --global dt~moment dt~moment-node

2-HTML 파일에 스크립트 태그를 추가하십시오.

<script src="node_modules/moment/moment.js" />

3-이제 그냥 사용할 수 있습니다. 기간.

today: string = moment().format('D MMM YYYY');

대한 각도 7+ (지지대 8 및도 9) :

1 : 명령으로 순간 설치 npm install moment --save

2 : 안에 아무것도 추가하지 마십시오 app.module.ts

3 : 다음 component과 같이 또는 다른 파일 위에 import 문을 추가 하십시오.import * as moment from 'moment';

4 : 이제 moment코드의 어느 곳에서나 사용할 수 있습니다 . 처럼:

myDate = moment(someDate).format('MM/DD/YYYY HH:mm');

ng CLI로

> npm install moment --save

app.module에서

import * as moment from 'moment';

providers: [{ provide: 'moment', useValue: moment }]

구성 요소에서

constructor(@Inject('moment') private moment)

이렇게하면 순간을 한 번 가져올 수 있습니다

각도 업데이트 => 5

{
   provide: 'moment', useFactory: (): any => moment
}

나를 위해 aot와 prod로 일하고 보편적으로 일합니다.

나는 순간을 사용하는 것을 좋아하지 않습니다.

Error   Typescript  Type 'typeof moment' is not assignable to type 'Moment'. Property 'format' is missing in type 'typeof moment'.

angular2-moment 라이브러리에는 {{myDate | amTimeAgo}}를 사용하여 .html 파일에서 사용하십시오.

구성 요소 클래스 (.ts) 파일 내에서 동일한 스크립트에 Typescript 함수로 액세스 할 수도 있습니다. 지시에 따라 먼저 라이브러리를 설치하십시오.

npm install --save angular2-moment

node_modules / angular2-moment에서 이제 calendar.pipe.d.ts , date-format.pipe.d.ts 등과 같은 ".pipe.d.ts"파일이 됩니다 .

각각은 동등한 파이프의 Typescript 함수 이름을 포함합니다. 예를 들어, DateFormatPipe () 는 amDateFormatPipe 의 함수입니다 .

프로젝트에서 DateFormatPipe 를 사용하려면 app.module.ts의 글로벌 제공자에 가져 와서 추가하십시오.

import { DateFormatPipe } from "angular2-moment";
.....
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, ...., DateFormatPipe]

그런 다음 함수를 사용하려는 구성 요소에서 맨 위에 가져 와서 생성자에 주입하고 다음을 사용하십시오.

import { DateFormatPipe } from "angular2-moment";
....
constructor(.......,  public dfp: DateFormatPipe) {
    let raw = new Date(2015, 1, 12);
    this.formattedDate = dfp.transform(raw, 'D MMM YYYY');
}

기능을 사용하려면이 프로세스를 따르십시오. 모든 기능에 액세스 할 수있는 한 가지 방법이 있다면 좋을 것입니다. 그러나 위의 해결책 중 어느 것도 나를 위해 효과가 없었습니다.

타사 패키지를 더 추가해도 괜찮 으면 angular2-moment 라이브러리를 사용했습니다. 설치는 매우 간단했으며 README의 최신 지침을 따라야합니다. 이 결과로 타이핑 을 설치 했습니다.

나를 위해 매력처럼 일했고 작동하도록 코드를 거의 추가하지 않았습니다.

이것이 여전히 사람들에게 문제가되는지 확실하지 않습니다 ... SystemJS와 MomentJS를 라이브러리로 사용하면이 문제가 해결되었습니다.

/*
 * 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;

거기에서 나를 위해 잘 작동합니다.

angular2 RC5의 경우 이것은 나를 위해 일했습니다 ...

npm을 통한 첫 설치 순간

npm install moment --save

그런 다음 사용하려는 구성 요소에서 모멘트를 가져옵니다.

import * as moment from 'moment';

마지막으로 systemjs.config.js "map"및 "packages"에서 모멘트 구성

// 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'}
  };

SnareChop의 답변 외에도 momentjs의 타이핑 파일을 변경해야했습니다.

에서 moment-node.d.ts나는 대체 :

export = moment;

와

export default moment;

Moment.js는 v2.14.1에서 TypeScript를 지원합니다.

참조 : https://github.com/moment/moment/pull/3280

Angular에서 Moment를 사용하는 내 자신의 버전

npm i moment --save

import * as _moment from 'moment';

...

moment: _moment.Moment = _moment();

constructor() { }

ngOnInit() {

    const unix = this.moment.format('X');
    console.log(unix);    

}

먼저 모멘트를로 가져온 _moment다음 초기 값이 moment유형 인 변수 를 선언 하십시오 ._moment.Moment_moment()

모멘트의 일반 임포트는 자동 완성을 제공하지 않지만 모멘트 네임 스페이스가 호출 된 패키지 Moment에서 _moment네임 스페이스의 유형 인터페이스로 모멘트를 선언 하면 모멘트의 API가 자동 완성 'moment'됩니다 _moment().

나는 순간 @types typings과 같은 바닐라 자바 ​​스크립트 라이브러리에 자동 완성을 찾고 있다면 이것이 또는 각도 공급자 를 사용하지 않고 순간을 사용하는 가장 각진 방법이라고 생각합니다 .

추가하십시오 "allowSyntheticDefaultImports": true당신에게 tsconfig.json.

국기는 무엇을합니까?

이것은 기본적으로 TypeScript 컴파일러에게 ES6 import 문을 사용하는 것이 좋습니다.

import * as moment from 'moment/moment';

기본 내보내기를 선언하지 않는 Moment.js와 같은 CommonJS 모듈에서. 플래그는 생성 된 코드가 아닌 유형 검사에만 영향을줍니다.

SystemJS를 모듈 로더로 사용하는 경우 필요합니다. TS 컴파일러에게 SystemJS를 사용한다고 알려 주면 플래그가 자동으로 켜집니다.

"module": "system"

또한 IDE를 사용하도록 구성된 경우 IDE에서 발생한 오류를 제거합니다 tsconfig.json.

systemjs 및 jspm이있는 angular2의 경우 다음을 수행해야했습니다.

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();

ANGULAR CLI 사용자의 경우

외부 라이브러리 사용은 다음 설명서에 있습니다.

https://github.com/angular/angular-cli/wiki/stories-third-party-lib

다음을 통해 라이브러리를 설치하십시오.

npm install lib-name --save

코드로 가져옵니다. 라이브러리에 입력이 포함되어 있지 않은 경우 다음을 사용하여 입력 할 수 있습니다.

npm install lib-name --save

npm install @ types / lib-name --save-dev

그런 다음 src / tsconfig.app.json을 열고 types 배열에 추가하십시오.

"유형": [ "lib-name"]

입력을 추가 한 라이브러리가 e2e 테스트에서만 사용되는 경우 e2e / tsconfig.e2e.json을 사용하십시오. 단위 테스트와 src / tsconfig.spec.json도 마찬가지입니다.

라이브러리에 @ types /에서 입력 할 수없는 경우 수동으로 입력을 추가하여 사용할 수 있습니다.

먼저, src / 폴더에 typings.d.ts 파일을 만드십시오.

이 파일은 전역 유형 정의로 자동 포함됩니다. 그런 다음 src / typings.d.ts에서 다음 코드를 추가하십시오.

'typeless-package'모듈 선언;

마지막으로, 라이브러리를 사용하는 구성 요소 또는 파일에서 다음 코드를 추가하십시오.

'typeless-package'에서 typelessPackage로 * ​​가져 오기; typelessPackage.method ();

끝난. 참고 : 사용하려는 라이브러리에 대해 더 많은 입력을 정의하는 것이 유용하거나 유용 할 수 있습니다.

System을 사용하여 allowSyntheticDefaultImports를 허용하도록 조언을 따랐습니다 (순간 사용할 내보내기가 없기 때문에). 그런 다음 누군가의 조언에 따라 사용했습니다.

import moment from 'moment';

순간이 내 system.js 구성에 매핑되었습니다. 다른 수입 명세서는 어떤 이유로 든 작동하지 않습니다.

다음은 나를 위해 일했습니다.

typings install dt~moment-node --save --global

입력 저장소에 모멘트 노드가 없습니다. 접두사 dt를 사용하여 작동하려면 한정 유형으로 리디렉션해야합니다.

systemjs를 사용하여 systemjs.config 내부에 대한 맵을 추가했습니다. moment

map: {
   .....,
   'moment': 'node_modules/moment/moment.js',
   .....
}

그런 다음 간단하게 가져 오기만하면 moment됩니다

import * as moment from 'moment'

나는 그것이 오래된 스레드라는 것을 알고 있지만 실제로 가장 효과적인 해결책은 다음과 같습니다.

1. 먼저 설치 npm install moment --save
2. 내 구성 요소에서 node_modules에서 요구하고 사용하십시오.

const moment = require('../../../node_modules/moment/moment.js');

@Component({...})
export class MyComponent {
   ...
   ngOnInit() {
       this.now = moment().format();
   }
   ...
}