angular - 在 Angular Typescript 库中使用 MomentJS 时出错

Question

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

我在包含 MomentJS 时遇到了各种构建问题。

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

[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.

我找到了 this SO question据说使用 import * as moment from 'moment'; 但是我得到了;

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

据我所知，这是仅有的两个选项，但我都无法正常工作，我错过了什么？

编辑

我添加了 this issue到包含简约复制步骤的库的 Github 存储库

Answer 1

错误非常明确和具体

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

这是根据 ES 模块规范。

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

import * as moment from 'moment';

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

import moment from 'moment';

首先要使这项工作正常进行，您需要指定 --allowSyntheticDefaultImports旗帜。

tsconfig.json

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

假设ngc将识别该选项，你还有一个额外的问题需要解决。

上面的标志适用于执行合成的 SystemJS 或 Webpack 等工具的用户，允许对此类代码进行类型检查。

从 TypeScript 2.7 开始，您现在可以指定 --esModuleInterop标志让语言提供综合作为转译过程的一部分。

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

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

import moment = require('moment');

import = require syntax 是 TypeScript 特定的构造，现在基本上不需要了。它的存在是为了获取 AMD、CommonJS 或 UMD 模块的模块导出的类型 和 的值。 “和”很重要，因为 const , var , 或 let = require调用仅在值空间而不是类型空间中创建名称。