blocks|key|4437004|text|下面的方法对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4437005|首先，安装moment的类型定义。|4437006|typings+install+moment+--save|offset|length|style|CODE|4437007|(注意:不是--ambient)|4437008|然后，要解决缺乏适当导出的问题：|4437009|import+*+as+moment+from+'moment';|code-block|syntax|javascript|4437010|entityMap^0|0|0|0|T|0|6|9|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@$F|X|G|Y|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@$F|10|G|11|H|I]]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|13|8|@]|9|@]|A|$Q|R]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

The following worked for me.

First, install the type definitions for moment.

<code>typings install moment --save</code>

(Note: NOT <code>--ambient</code>)

Then, to work around the lack of a proper export:

<pre><code>import * as moment from 'moment';
</code></pre>

blocks|key|4436982|text|我会选择以下几点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4436983|npm+install+moment+--save|offset|length|style|CODE|4436984|在systemjs.config.js文件的map数组中添加：|4436985|'moment':+'node_modules/moment'|4436986|添加到packages数组：|4436987|'moment':+{+defaultExtension:+'js'+}|4436988|在您的component.ts使用中：import+*+as+moment+from+'moment/moment';|4436989|就是这样。您可以从组件的类中使用：|4436990|today:+string+=+moment().format('D+MMM+YYYY');|4436991|entityMap^0|0|0|P|0|1|I|M|3|0|0|V|0|3|8|0|0|10|0|J|14|0|0|0|1A|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@$D|12|E|13|F|G]|$D|14|E|15|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|16|8|@$D|17|E|18|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|19|8|@$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1C|8|@$D|1D|E|1E|F|G]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1F|8|@$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1I|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1J|8|@$D|1K|E|1L|F|G]]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|W|$]]

I would go with following:

<code>npm install moment --save</code>

To your <code>systemjs.config.js</code> file's <code>map</code> array add:

<code>'moment': 'node_modules/moment'</code>

to <code>packages</code> array add:

<code>'moment': { defaultExtension: 'js' }</code>

In your component.ts use:
<code>import * as moment from 'moment/moment';</code>

and that's it. You can use from your component's class:

<code>today: string = moment().format('D MMM YYYY');</code>

blocks|key|4437207|text|我们现在正在使用模块，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4437208|试试import+{MomentModule}+from+'angular2-moment/moment.module';|offset|length|style|CODE|4437209|在npm+install+angular2-moment之后|4437210|http://ngmodules.org/modules/angular2-moment|4437211|entityMap|0|LINK|mutability|MUTABLE|url^0|0|2|1N|0|1|R|0|0|18|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|L|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|K]]]]

We're using modules now, 

try <code>import {MomentModule} from 'angular2-moment/moment.module';</code> 

after <code>npm install angular2-moment</code>

<a href="http://ngmodules.org/modules/angular2-moment" rel="noreferrer">http://ngmodules.org/modules/angular2-moment</a>

blocks|key|4437247|text|要在Typescript项目中使用它，您需要安装moment：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4437248|npm+install+moment+--save|4437249|安装moment后，导入后即可在任意.ts文件中使用：|4437250|import+*+as+moment+from+"moment";|4437251|entityMap^0|2|A|0|0|P|0|I|3|0|0|X|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|M|$]]

To use it in a <code>Typescript</code> project you will need to install moment:

<code>npm install moment --save</code>

After installing moment, you can use it in any <code>.ts</code> file after importing it:

<code>import * as moment from "moment";</code>

blocks|key|4436981|text|如果您可以添加更多的第三方包，我使用了angular2-moment库。安装非常简单，您应该遵循自述文件中的最新说明。由于这个原因，我也安装了typings。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4436982|对我来说，它就像一个护身符，几乎没有添加任何代码来使其正常工作。|4436983|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/urish/angular2-moment|1|https://github.com/typings/typings^0|J|F|0|1Z|7|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

If you're okay adding more third-party packages, I used the <a href="https://github.com/urish/angular2-moment" rel="noreferrer">angular2-moment</a> library. Installation was pretty straightforward, and you should follow the latest instructions on the README. I also installed <a href="https://github.com/typings/typings" rel="noreferrer">typings</a> as a result of this.

Worked like a charm for me, and barely added any code to get it working.

blocks|key|4437020|text|然而，不确定这是否仍然是人们的一个问题。使用SystemJS和MomentJS作为库，这为我解决了问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4437021|/*
+*+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+%7C%7C+moment;|code-block|syntax|javascript|4437022|从那以后我就能很好地工作了。|4437023|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Not sure if this is still an issue for people, however... Using SystemJS and MomentJS as library, this solved it for me

<pre><code>/*
 * 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) =&gt; moment.Moment = (&lt;any&gt;moment).default || moment;
</code></pre>

Works fine from there for me.

blocks|key|4437186|text|对angular2+RC5来说，这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4437187|通过npm的第一次安装时刻|4437188|npm+install+moment+--save|code-block|syntax|javascript|4437189|然后在要使用的组件中导入moment|4437190|import+*+as+moment+from+'moment';|4437191|最后在systemjs.config.js+"map“和"packages”中配置moment|4437192|//+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'}
++};|4437193|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

for angular2 RC5 this worked for me...

first install moment via npm

<pre><code>npm install moment --save
</code></pre>

Then import moment in the component that you want to use it

<pre><code>import * as moment from 'moment';
</code></pre>

lastly configure moment in systemjs.config.js "map" and "packages"

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

blocks|key|4436896|text|除了SnareChop的回答之外，我还必须更改momentjs的类型文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4436897|在moment-node.d.ts中，我替换了：|offset|length|style|CODE|4436898|export+=+moment;|code-block|syntax|javascript|4436899|使用|4436900|export+default+moment;|4436901|entityMap^0|0|1|G|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

In addition to SnareChop's answer, I had to change the typings file for momentjs.

In <code>moment-node.d.ts</code> I replaced: 

<pre><code>export = moment;
</code></pre>

with

<pre><code>export default moment;
</code></pre>

blocks|key|4437155|text|在v2.14.1中，Moment.js现在支持TypeScript。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4437156|请参阅：https://github.com/moment/moment/pull/3280|offset|length|4437157|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/moment/moment/pull/3280^0|0|4|16|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Moment.js now supports TypeScript in v2.14.1.

See: <a href="https://github.com/moment/moment/pull/3280" rel="nofollow">https://github.com/moment/moment/pull/3280</a>

blocks|key|4437279|text|我自己使用角度矩的版本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4437280|npm+i+moment+--save|offset|length|style|CODE|4437281|import+*+as+_moment+from+'moment';

...

moment:+_moment.Moment+=+_moment();

constructor()+{+}

ngOnInit()+{

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

}|code-block|syntax|javascript|4437282|首先将moment作为_moment导入，然后声明moment变量，类型为_moment.Moment，初始值为_moment()。|4437283|普通的moment导入不会给你任何自动补全，但是如果你从_moment命名空间中声明moment+Moment接口，从'moment'包中声明moment，用调用的moment命名空间初始化，_moment()会给你自动补全moment的api。|4437284|如果你在寻找像moment这样的普通javascript库的自动补全，我认为这是使用moment而不使用@types+typings或angular提供程序的最有角度的方式。|4437285|entityMap^0|0|0|J|0|0|B|7|P|6|11|E|1K|9|0|S|7|1D|6|1N|8|2O|9|0|1G|6|1N|7|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|Z|8|@$D|10|E|11|F|G]|$D|12|E|13|F|G]|$D|14|E|15|F|G]|$D|16|E|17|F|G]]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@$D|19|E|1A|F|G]|$D|1B|E|1C|F|G]|$D|1D|E|1E|F|G]|$D|1F|E|1G|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1H|8|@$D|1I|E|1J|F|G]|$D|1K|E|1L|F|G]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|T|$]]

My own version of using Moment in Angular

<code>npm i moment --save</code>

<pre><code>import * as _moment from 'moment';

...

moment: _moment.Moment = _moment();

constructor() { }

ngOnInit() {

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

}
</code></pre>

First import moment as <code>_moment</code>, then declare <code>moment</code> variable with type <code>_moment.Moment</code> with an initial value of <code>_moment()</code>.

Plain import of moment wont give you any auto completion but if you will declare moment with type <code>Moment</code> interface from <code>_moment</code> namespace from <code>'moment'</code> package initialized with moment namespace invoked <code>_moment()</code> gives you auto completion of moment's api's.

I think this is the most angular way of using moment without using <code>@types</code> <code>typings</code> or angular providers, if you're looking auto completion for vanilla javascript libraries like moment.

blocks|key|4437111|text|尝试将"allowSyntheticDefaultImports":+true添加到您的tsconfig.json。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4437112|旗帜是用来做什么的？|4437113|这基本上告诉TypeScript编译器可以使用ES6+import语句，即。|4437114|import+*+as+moment+from+'moment/moment';|code-block|syntax|javascript|4437115|在Moment.js这样的CommonJS模块上，它没有声明默认导出。该标志只影响类型检查，而不影响生成的代码。|4437116|如果你使用SystemJS作为你的模块加载器，这是必要的。如果你告诉你的TS编译器你使用的是SystemJS，这个标志就会自动打开：|4437117|"module":+"system"|4437118|这还将删除IDE抛出的任何错误(如果它们被配置为使用tsconfig.json+)。|4437119|entityMap^0|3|10|18|D|0|0|0|0|0|0|0|Q|D|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|16|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|17|8|@]|D|@]|E|$]]|$1|S|3|T|5|L|7|18|8|@]|D|@]|E|$M|N]]|$1|U|3|V|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|X|$]]

Try adding <code>"allowSyntheticDefaultImports": true</code> to your <code>tsconfig.json</code>.

<h3>What does the flag do?</h3>

This basically tells the TypeScript compiler that it's okay to use an ES6 import statement, i. e.

<pre><code>import * as moment from 'moment/moment';
</code></pre>

on a CommonJS module like Moment.js which doesn't declare a default export. The flag only affects type checking, not the generated code.

It is necessary if you use SystemJS as your module loader. The flag will be automatically turned on if you tell your TS compiler that you use SystemJS:

<pre><code>"module": "system"
</code></pre>

This will also remove any errors thrown by IDEs if they are configured to make use of the <code>tsconfig.json</code>.

blocks|key|4437073|text|下面的方法对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4437074|typings+install+dt~moment-node+--save+--global|code-block|syntax|javascript|4437075|类型存储库中不存在时刻节点。您需要重定向到Definitely，以便使用前缀dt使其工作。|4437076|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

The following worked for me:

<pre><code>typings install dt~moment-node --save --global
</code></pre>

The moment-node does not exist in typings repository. You need to redirect to Definitely Typed in order to make it work using the prefix dt.

blocks|key|4437201|text|对于带有systemjs和jspm的angular2，必须执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4437202|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();|code-block|syntax|javascript|4437203|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

for angular2 with systemjs and jspm had to do:

<pre><code>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();
</code></pre>

blocks|key|4437178|text|我听从了建议，允许allowSyntheticDefaultImports+(因为我不需要从moment导出)，使用系统。然后我听从了某人的建议来使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4437179|import+moment+from+'moment';|code-block|syntax|javascript|4437180|时刻被映射到我的system.js配置中。由于某些原因，其他的import语句对我不起作用|4437181|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I followed advice to allow allowSyntheticDefaultImports (since there is no export from moment to use for me), using System. Then I followed someone's advice to use:

<pre><code>import moment from 'moment';
</code></pre>

With moment being mapped in my system.js config. The other import statements wouldn't work for me, for some reason

blocks|key|4437225|text|对于moment，我所做的是，在我的systemjs.config中添加了systemjs的地图|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4437226|map:+{
+++.....,
+++'moment':+'node_modules/moment/moment.js',
+++.....
}|code-block|syntax|javascript|4437227|然后，您只需执行以下操作即可轻松导入moment|4437228|import+*+as+moment+from+'moment'|4437229|entityMap^0|2|6|0|0|I|6|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

With systemjs what I did is, inside my systemjs.config I added map for <code>moment</code>

<pre><code>map: {
 .....,
 'moment': 'node_modules/moment/moment.js',
 .....
}
</code></pre>

And then you can easily import <code>moment</code> just by doing

<pre><code>import * as moment from 'moment'
</code></pre>

I tried to use it with typescript bindings:

<pre><code>npm install moment --save
typings install moment --ambient -- save
</code></pre>

test.ts:

<pre><code>import {moment} from 'moment/moment';
</code></pre>

And without:

<pre><code>npm install moment --save
</code></pre>

test.ts:

<pre><code>var moment = require('moment/moment');
</code></pre>

But when I call moment.format(), I get an error.
Should be simple, can anybody provide a command line/import combination that would work?

How to use moment.js library in angular 2 typescript app?

我尝试将其与typescript绑定一起使用：npm install moment --savetypings install moment --ambient -- savetest.ts：import {moment} from 'moment/moment';如果没有：npm install moment --savetest.ts：var moment = require('moment/

问如何在angular 2 typescript应用中使用moment.js库？
EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在angular 2 typescript应用中使用moment.js库？EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在angular 2 typescript应用中使用moment.js库？
EN