在Angular和TypeScript中使用Moment [英] Using Moment with Angular and TypeScript

问题描述

我是TypeScript的新手，已经有一段时间了，因为我已经进行了认真的JavaScript开发，因此我可能会遗漏一些明显的东西.

I'm new to TypeScript and it's been a while since I've done any serious JavaScript development, so I may be missing something obvious.

我试图在带有TypeScript的Angular 1应用中使用Moment.

I'm trying to use Moment in an Angular 1 app with TypeScript.

我正在使用Angular 1.6.5，Moment 2.17.1和TypeScript 2.17.1.我从npm @types\angular包中安装了Angular类型. Angular的Intellisense等正在VS Code中运行.

I'm using Angular 1.6.5, Moment 2.17.1 and TypeScript 2.17.1. I have Angular typings installed from the npm @types\angular package. Intellisense etc for Angular is working in VS Code.

我已将示例代码发布到GitHub上: https://github.com/kevinkuszyk/moment-angular-typescript

I've posted the sample code to GitHub here: https://github.com/kevinkuszyk/moment-angular-typescript

我的示例应用程序在浏览器中运行，但是TypeScript编译器抱怨找不到Moment:

My sample app runs in the browser, but the TypeScript compiler complains that it can't find Moment:

app/controller.ts(3,20): error TS2503: Cannot find namespace 'moment'.
app/controller.ts(6,30): error TS2304: Cannot find name 'moment'.

尝试使用///编译器指令

为解决此问题，我尝试添加以下///编译器指令:

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

但这并不能解决TypeScript编译器:

But that doesn't fix the TypeScript compiler:

app/controller.ts(5,20): error TS2503: Cannot find namespace 'moment'.
app/controller.ts(8,30): error TS2304: Cannot find name 'moment'.

导入时刻

接下来，我尝试根据他们的 docs 中的说明导入Moment:

Import Moment

Next I tried importing Moment using the instructions from their docs:

import * as moment from 'moment';

但这会使TypeScript生成不同的erorr:

But this makes TypeScript generate a different erorr:

app/controller.ts(13,5): error TS2686: 'angular' refers to a UMD global, but the current file is a module. Consider adding an import instead.

导入角度

我也导入了Angular.这可以修复TypeScript:

Import Angular

I also imported Angular. This fixes TypeScript:

import * as angular from "angular";

但是现在该应用程序无法在浏览器中运行:

But now the app doesn't run in the browser:

Uncaught ReferenceError: require is not defined
    at controller.js:2

使用Require.JS

最后，我尝试添加Require.JS，但这只会导致另一个运行时错误:

Use Require.JS

Finally I tried adding Require.JS, but this just causes a different runtime error:

Uncaught Error: Module name "moment" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
    at makeError (require.js:168)
    at Object.localRequire [as require] (require.js:1433)
    at requirejs (require.js:1794)
    at controller.js:2

问题

1. 我在这里错过了什么明显的东西吗?
2. 引用npm上的主软件包(而不是单独的@types软件包)随附的d.ts文件的最佳实践是什么?
3. 如何在不使用外部模块加载器的情况下完成这项工作?

1. Have I missed anything obvious here?
2. What's the best practice for referencing d.ts files which are shipped with the main package on npm rather than a separate @types package?
3. How do I make this work without using an external module loader?

推荐答案

这似乎是Moment的d.ts文件的已知问题(请参阅问题#3808 和#3663 ).

It looks like this is a known issue with Moment's d.ts file (see issues #3763, #3808 and #3663).

虽然我们等待正式修复，但对我却有用.

While we wait for an official fix, this worked for me.

更改:

export = moment;

对此:

declare module "moment" {
    export = moment;
}

这篇关于在Angular和TypeScript中使用Moment的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！