Làm cách nào để sử dụng thư viện Moment.js trong ứng dụng bản in 2 góc?

Tôi đã cố gắng sử dụng nó với các ràng buộc bản thảo:

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

kiểm tra:

import {moment} from 'moment/moment';

Và không có:

npm install moment --save

kiểm tra:

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

Nhưng khi tôi gọi khoảnh khắc.format (), tôi gặp lỗi. Nên đơn giản, bất cứ ai cũng có thể cung cấp một kết hợp dòng lệnh / nhập sẽ hoạt động?

Cập nhật tháng 4 năm 2017:

Kể từ phiên bản 2.13.0, Moment bao gồm tệp định nghĩa bản thảo. https://momentjs.com/docs/#/use-it/typescript/

Chỉ cần cài đặt nó với npm, trong loại bảng điều khiển của bạn

npm install --save moment

Và sau đó trong ứng dụng Angular của bạn, nhập dễ dàng như thế này:

import * as moment from 'moment';

Thế là xong, bạn nhận được hỗ trợ Bản đánh máy đầy đủ!

Chỉnh sửa phần thưởng: Để nhập một biến hoặc thuộc tính như Momenttrong Bản mô tả, bạn có thể thực hiện việc này, ví dụ:

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

momentlà một nguồn tài nguyên toàn cầu của bên thứ ba. Các đối tượng khoảnh khắc sống trên windowtrình duyệt. Do đó, nó không đúng với importứng dụng angular2 của bạn. Thay vào đó, bao gồm <script>thẻ trong html của bạn sẽ tải tệp moment.js.

Để làm cho TypeScript hài lòng, bạn có thể thêm

declare var moment: any;

ở đầu các tệp của bạn nơi bạn sử dụng nó để dừng các lỗi biên dịch hoặc bạn có thể sử dụng

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

hoặc sử dụng tsd để cài đặt tệp moment.d.ts mà TypeScript có thể tự tìm thấy.

Thí dụ

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

Chỉ cần chắc chắn để thêm thẻ script trong html hoặc khoảnh khắc của bạn sẽ không tồn tại.

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

Tải mô-đun moment

Trước tiên, bạn sẽ cần thiết lập trình tải mô-đun, chẳng hạn như System.js để tải các tệp commonjs khoảnh khắc

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

Sau đó, để nhập khoảnh khắc vào tệp khi cần sử dụng

import * as moment from 'moment';

hoặc là

import moment = require('moment');

BIÊN TẬP:

Ngoài ra còn có các tùy chọn với một số trình đóng gói như Webpack hoặc SystemJS builder hoặc Browserify sẽ giữ khoảnh khắc của đối tượng cửa sổ. Để biết thêm thông tin về những điều này, vui lòng truy cập trang web tương ứng của họ để được hướng dẫn.

Sau đây làm việc cho tôi.

Đầu tiên, cài đặt các định nghĩa loại cho thời điểm này.

typings install moment --save

(Lưu ý: KHÔNG --ambient)

Sau đó, để làm việc xung quanh việc thiếu một xuất khẩu thích hợp:

import * as moment from 'moment';

Tôi sẽ đi theo sau:

npm install moment --save

Để mảng systemjs.config.jstập tin của bạn mapthêm:

'moment': 'node_modules/moment'

để packagesthêm mảng:

'moment': { defaultExtension: 'js' }

Trong thành phần của bạn. Sử dụng: import * as moment from 'moment/moment';

và đó là nó. Bạn có thể sử dụng từ lớp thành phần của bạn:

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

Hiện đang sử dụng các mô-đun,

thử import {MomentModule} from 'angular2-moment/moment.module';

sau npm install angular2-moment

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

Để sử dụng nó trong một Typescriptdự án, bạn sẽ cần phải cài đặt thời điểm:

npm install moment --save

Sau khi cài đặt, bạn có thể sử dụng nó trong bất kỳ .ts tệp sau khi nhập nó:

import * as moment from "moment";

--- Cập nhật ngày 11/11

Các kiểu chữ hiện không được dùng nữa và nó đã được thay thế bằng npm @types . Từ giờ trở đi việc khai báo kiểu sẽ không yêu cầu công cụ nào ngoài npm. Để sử dụng Moment, bạn sẽ không cần phải cài đặt các định nghĩa loại thông qua @types vì Moment đã cung cấp các định nghĩa loại riêng.

Vì vậy, nó giảm xuống chỉ còn 3 bước:

1 - Thời điểm cài đặt bao gồm các định nghĩa loại:

npm install moment --save

2 - Thêm thẻ script trong tệp HTML của bạn:

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

3 - Bây giờ bạn có thể chỉ cần sử dụng nó. Giai đoạn = Stage.

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

--- Câu trả lời gốc

Điều này có thể được thực hiện chỉ trong 3 bước:

1 - Cài đặt định nghĩa thời điểm - tệp * .d.ts :

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

2 - Thêm thẻ script trong tệp HTML của bạn:

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

3 - Bây giờ bạn có thể chỉ cần sử dụng nó. Giai đoạn = Stage.

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

Dành cho Angular 7+ (Hỗ trợ 8 và 9 cũng được) :

1: Cài đặt khoảnh khắc bằng lệnh npm install moment --save

2: Không thêm bất cứ thứ gì vào app.module.ts

3: Chỉ cần thêm câu lệnh nhập vào đầu trang của bạn component tệp hoặc bất kỳ tệp nào khác như thế này:import * as moment from 'moment';

4: Bây giờ bạn có thể sử dụng momentbất cứ nơi nào trong mã của bạn. Giống như:

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

với ng CLI

> npm install moment --save

trong app.module

import * as moment from 'moment';

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

trong thành phần

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

Bằng cách này, bạn nhập khoảnh khắc một lần

CẬP NHẬT Angular => 5

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

Đối với tôi làm việc trong prod với aot và cũng với phổ quát

Tôi không thích sử dụng bất kỳ nhưng sử dụng khoảnh khắc. Tôi đã nhận được

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

Thư viện angular2-khoảnh khắc có các đường ống như {{myDate | amTimeAgo}} để sử dụng trong các tệp .html.

Những đường ống tương tự cũng có thể được truy cập dưới dạng các hàm typecript trong tệp lớp thành phần (.ts). Đầu tiên cài đặt thư viện theo hướng dẫn:

npm install --save angular2-moment

Trong nút_modules / angular2-khoảnh khắc bây giờ sẽ là các tệp ".pipe.d.ts" như calendar.pipe.d.ts , date-format.pipe.d.ts và nhiều hơn nữa.

Mỗi cái chứa tên hàm typecript cho ống tương đương, ví dụ, DateFormatPipe () là hàm cho amDateFormatPipe .

Để sử dụng DateFormatPipe trong dự án của bạn, hãy nhập và thêm nó vào các nhà cung cấp toàn cầu của bạn trong app.module.ts:

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

Sau đó, trong bất kỳ thành phần nào mà bạn muốn sử dụng hàm, nhập nó lên trên, đưa vào hàm tạo và sử dụng:

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

Để sử dụng bất kỳ chức năng nào theo quy trình này. Sẽ thật tuyệt nếu có một cách để có quyền truy cập vào tất cả các chức năng, nhưng không có giải pháp nào ở trên làm việc cho tôi.

Nếu bạn ổn khi thêm các gói của bên thứ ba, tôi đã sử dụng thư viện angular2-khoảnh khắc . Việc cài đặt khá đơn giản và bạn nên làm theo các hướng dẫn mới nhất trên README. Tôi cũng đã cài đặt typings như là kết quả của việc này.

Làm việc như một cơ duyên đối với tôi, và hầu như không thêm bất kỳ mã nào để làm cho nó hoạt động.

Không chắc đây có phải là vấn đề với mọi người hay không, tuy nhiên ... Sử dụng SystemJS và MomentJS làm thư viện, điều này đã giải quyết nó cho tôi

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

Hoạt động tốt từ đó cho tôi.

cho angular2 RC5 điều này làm việc cho tôi ...

khoảnh khắc cài đặt đầu tiên qua npm

npm install moment --save

Sau đó nhập khoảnh khắc trong thành phần mà bạn muốn sử dụng nó

import * as moment from 'moment';

cấu hình cuối cùng khoảnh khắc trong systemjs.config.js "map" và "gói"

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

Ngoài câu trả lời của SnareChop, tôi đã phải thay đổi tệp đánh máy cho khoảnh khắc.

Trong moment-node.d.tstôi thay thế:

export = moment;

với

export default moment;

Moment.js hiện hỗ trợ TypeScript trong v2.14.1.

Xem: https://github.com/moment/moment/pull/3280

Phiên bản riêng của tôi về việc sử dụng 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);    

}

Thời điểm nhập đầu tiên là _moment, sau đó khai báo momentbiến với loại _moment.Momentcó giá trị ban đầu là_moment() .

Nhập đơn giản thời điểm sẽ không cung cấp cho bạn bất kỳ hoàn thành tự động nào nhưng nếu bạn sẽ khai báo khoảnh khắc với Momentgiao diện loại từ _momentkhông gian tên từ 'moment'gói được khởi tạo với không gian tên khoảnh khắc được gọi_moment() sẽ cho bạn tự động hoàn thành thời điểm của api.

Tôi nghĩ rằng đây là cách sử dụng nhất thời điểm mà không cần sử dụng @types typingshoặc nhà cung cấp góc, nếu bạn đang tìm kiếm hoàn thành tự động cho các thư viện javascript vanilla như khoảnh khắc.

Hãy thử thêm "allowSyntheticDefaultImports": truevào của bạntsconfig.json .

Cờ làm gì?

Điều này về cơ bản cho trình biên dịch TypeScript sử dụng câu lệnh nhập ES6, nghĩa là

import * as moment from 'moment/moment';

trên một mô-đun CommonJS như Moment.js không khai báo xuất mặc định. Cờ chỉ ảnh hưởng đến việc kiểm tra loại, không phải mã được tạo.

Nó là cần thiết nếu bạn sử dụng SystemJS làm trình tải mô-đun của bạn. Cờ sẽ được tự động bật nếu bạn thông báo cho trình biên dịch TS của bạn rằng bạn sử dụng SystemJS:

"module": "system"

Điều này cũng sẽ loại bỏ bất kỳ lỗi nào được ném bởi IDE nếu chúng được cấu hình để sử dụng tsconfig.json.

cho angular2 với systemjs và jspm phải làm:

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

Dành cho người dùng ANGULAR CLI

Sử dụng các thư viện bên ngoài có trong tài liệu ở đây:

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

Đơn giản chỉ cần cài đặt thư viện của bạn thông qua

npm cài đặt tên lib - lưu

và nhập nó trong mã của bạn. Nếu thư viện không bao gồm các kiểu chữ, bạn có thể cài đặt chúng bằng cách sử dụng:

npm cài đặt tên lib - lưu

cài đặt npm @ type / lib-name --save-dev

Sau đó mở src / tsconfig.app.json và thêm nó vào mảng kiểu:

"loại": ["tên lib"]

Nếu thư viện bạn đã thêm các kiểu chữ chỉ được sử dụng trong các bài kiểm tra e2e của bạn, thay vào đó hãy sử dụng e2e / tsconfig.e2e.json. Điều tương tự cũng xảy ra đối với các bài kiểm tra đơn vị và src / tsconfig.spec.json.

Nếu thư viện không có sẵn các kiểu chữ tại @ type /, bạn vẫn có thể sử dụng nó bằng cách thêm các kiểu chữ cho nó:

Đầu tiên, tạo một tệp typings.d.ts trong thư mục src / của bạn.

Tập tin này sẽ được tự động đưa vào như định nghĩa loại toàn cầu. Sau đó, trong src / typings.d.ts, thêm đoạn mã sau:

khai báo mô-đun 'typless-gói';

Cuối cùng, trong thành phần hoặc tệp sử dụng thư viện, hãy thêm đoạn mã sau:

nhập * dưới dạng typlessPackage từ 'typless-pack'; typlessPackage.method ();

Làm xong. Lưu ý: bạn có thể cần hoặc thấy hữu ích để xác định thêm các kiểu chữ cho thư viện mà bạn đang cố sử dụng.

Tôi đã làm theo lời khuyên để cho phép allowSy mergDefaultImports (vì không có xuất khẩu từ lúc này để sử dụng cho tôi), sử dụng Hệ thống. Sau đó, tôi làm theo lời khuyên của ai đó để sử dụng:

import moment from 'moment';

Với khoảnh khắc được ánh xạ trong cấu hình system.js của tôi. Các báo cáo nhập khẩu khác sẽ không làm việc cho tôi, vì một số lý do

Sau đây làm việc cho tôi:

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

Nút khoảnh khắc không tồn tại trong kho lưu trữ kiểu chữ. Bạn cần chuyển hướng đến Được nhập chắc chắn để làm cho nó hoạt động bằng cách sử dụng tiền tố dt.

Với systemjs những gì tôi đã làm là, bên trong systemjs.config tôi đã thêm bản đồ cho moment

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

Và sau đó bạn có thể dễ dàng nhập momentchỉ bằng cách làm

import * as moment from 'moment'

Tôi biết đó là một chủ đề cũ, nhưng đối với tôi giải pháp đơn giản nhất thực sự hiệu quả là:

1. Cài đặt nó trước npm install moment --save
2. Trong các thành phần của tôi yêu cầu nó từ node_modules và sử dụng nó:

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

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