在Angular Typescript库中使用MomentJS时出错 [英] Errors when using MomentJS in Angular Typescript library

问题描述

我正在使用 jvandemo/generator-angular2-library构建Angular(2+)组件库作为启动器，它使用 Rollup 作为模块构建器.我在库中创建的组件使用 MomentJS .

I'm building an Angular (2+) component library using jvandemo/generator-angular2-library as a starter, which uses Rollup as a module builder. The component I am creating in the library uses MomentJS.

在包含MomentJS的过程中，我遇到了各种构建问题.

I've had various build issues with the inclusion of MomentJS.

我首先使用import moment from 'moment';将矩导入组件中，但是在构建时会产生以下错误；

I first used import moment from 'moment'; to import moment into the component, but that produces the following error at build;

[17:26:28] Starting 'ngc'...
Error at /Users/chris/angular-library/.tmp/components/my-library/my-component.component.ts:6:8: Module '"/Users/chris/my-library/node_modules/moment/moment"' has no default export.

我发现了这个SO问题，说它与import * as moment from 'moment';一起使用我明白了

I found this SO question that said to use import * as moment from 'moment'; however with that I get;

'moment' is imported by build/components/my-component.component.js, but could not be resolved – treating it as an external dependency

events.js:182
      throw er; // Unhandled 'error' event
      ^
Error: Cannot call a namespace ('moment')
    at error (/Users/chris/angular-library/node_modules/rollup/dist/rollup.js:185:14)

据我所知，这是仅有的两个选择，我都不能工作，我想念的是什么?

As far as I can tell these are the only two options and I can't get either to work, what am I missing?

修改

我已将此问题添加到图书馆的Github存储库中，包含简约的复制步骤

I've added this issue to the library's Github repo that contains minimalistic replication steps

推荐答案

错误非常明确且具体

错误:无法调用名称空间("moment") 错误(/Users/chris/angular-library/node_modules/rollup/dist/rollup.js:185:14)

Error: Cannot call a namespace ('moment') at error (/Users/chris/angular-library/node_modules/rollup/dist/rollup.js:185:14)

这是根据ES模块规范.

This is per the ES Module Specification.

这意味着以下内容是无效的时刻或任何您打算调用的内容的导入方法，因为可能不会调用诸如* as ns创建的模块名称空间对象.

That means the following is an invalid way to import moment, or anything you intend to call, because a module namespace object, such as that created by * as ns may not be called.

import * as moment from 'moment';

正确的形式是ngc在上面引发错误的形式

The correct form is the form that ngc is raising an error on

import moment from 'moment';

首先要进行此工作，您需要指定--allowSyntheticDefaultImports标志.

Firstly to make this work, you need to specify the --allowSyntheticDefaultImports flag.

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}

假设ngc将识别该选项，您仍然需要解决其他问题.

Assuming that ngc will recognize the option, you still have an additional problem to work out.

上面的标志适用于执行综合功能的SystemJS或Webpack之类的工具的用户，从而允许对此类代码进行类型检查.

The flag above is for users of tools such as SystemJS or Webpack which perform the synthesis, allowing such code to typecheck.

从TypeScript 2.7开始，您现在可以指定--esModuleInterop标志，以使该语言在翻译过程中提供合成.

As of TypeScript 2.7, you can now specify the --esModuleInterop flag to have the language provide the synthesis as part of the transpilation process.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

请注意，如果您使用的是2.7 之前的TypeScript版本，并且如果要编译为CommonJS，AMD或UMD模块(例如，使用--module commonjs)，则正确的导入语法应该是

Note that if you are using a version of TypeScript prior to 2.7 and if you are compiling to CommonJS, AMD, or UMD modules (e.g. with --module commonjs) the correct import syntax is rather

import moment = require('moment');

import = require语法是TypeScript特定的构造，现在基本上不需要.它的存在既可以获取AMD，CommonJS或UMD模块的类型，又可以获取的值. "and"很重要，因为const，var或let = require调用仅在值空间中创建名称，而不在类型空间中创建名称.

The import = require syntax is a TypeScript specific construct, now largely unnecessary. It exists to acquire both the type and the value of the module exports of an AMD, CommonJS, or UMD module. The "and" is important because a const, var, or let = require invocation only creates a name in the value space not in the type space.

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