我正在使用 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 存储库
最佳答案
错误非常明确和具体
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
调用仅在值空间而不是类型空间中创建名称。
关于angular - 在 Angular Typescript 库中使用 MomentJS 时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46876541/