在角类型库中使用MomentJS时出现的错误

Question

我正在构建一个角度(2+)组件库，使用jvandemo/生成器-angular2库作为启动器，它使用卷起作为模块构建器。我在库中创建的组件使用MomentJS。

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

我首先使用import moment from '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.

我找到了这个问题，它说要使用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)

据我所知，这是我唯一的两种选择，我也无法工作，我错过了什么？

编辑

我已经将本期添加到库的Github中，其中包含极简的复制步骤

Answer 1

这个错误是非常明确和具体的。

错误:在错误(/Users/chris/angular-library/node_modules/rollup/dist/rollup.js:185:14)时不能调用命名空间(“瞬间”)

这是根据ES模块规范。

这意味着以下是导入时间的无效方式，或者您打算调用的任何东西，因为模块命名空间对象(如* 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语法是一个特定于TypeScript的构造，现在基本上没有必要了。它的存在是为了获取AMD、CommonJS或UMD模块的模块导出的类型和值。"and“很重要，因为const、var或let = require调用只在值空间而不是类型空间中创建名称。

Answer 2

无论谁在2018+中找到它，都可以看到Angular6和当前的@A角形/cli：

今天我碰到了这个，发现了解在这里。

import * as moment_ from 'moment';
const moment = moment_;

现在，库为我编译了OK。

Answer 3

在示例指令中，我在使用以下命令时编译没有问题：

import { Directive, ElementRef } from '@angular/core';
import * as moment from '../node_modules/moment/moment';
@Directive({
  selector: '[sampleDirective]'
})
export class SampleDirective {

  constructor(private el: ElementRef) {
    moment.isDate('test');
  }

}

这些文件是从根目录下的生成目录编译的.您确实收到了关于“此”的进一步警告，此处提到：

https://github.com/rollup/rollup/issues/794

我需要在古尔文件中说，图书馆是外部的：

  external: [
    '@angular/core',
    '@angular/common',
    'moment'
  ],

在github链接中，您应该向两个rollup部分添加一个onwarn块:即'rollup:umd‘和'rollup:fesm’部分

onwarn: function(warning) {
    // Skip certain warnings

    // should intercept ... but doesn't in some rollup versions
    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }

    // console.warn everything else
    console.warn( warning.message );
},

这能让你更进一步吗？