带有没有默认导出的模块的 Angular AOT/Rollup(如 immutable.js、moment.js)

Question

我尝试调整我的 Angular 应用程序以准备好进行 AOT 编译和 Tree Shaking(汇总)。但是我在使用没有默认导出的模块时遇到了问题(immutable.js，moment.js，......)。根据 typscript(查看 here)，只能通过以下语句使用此类模块:import x = require('x') 或 import * as x from 'x' 但是这两个语句在汇总过程中都会导致问题。在某些情况下，我在汇总期间遇到错误:Cannot call a namespace ('x') 在某些情况下，我遇到运行时错误:x is undefined/p>

在这里你可以找到我的 rollup-config.js 和 tsconfig-aot.json tsconfig-aot_rollup-config.zip

我需要一种在 AOT 编译和汇总期间使用 immutable.js、moment.js 等包的方法。有办法做到这一点吗？

谢谢!

Answer 1

更新

我之前的回答遇到了问题。这是我找到的解决方案，它适用于 SystemJs 和使用 AoT/rollup。

我的导入语句如下:

import * as moment from 'moment';
const momentJs = (moment as any).default ? (moment as any).default : moment;

然后，在您的代码中，像这样使用它:

const startDateString = momentJs(startDate).format('YYYY-MM-DD');

这是由于 SystemJs 和 Rollup 使用两种不同的方法来解析没有默认导出的导入模块。

我有两个 TypeScript 配置文件，一个用于 systemJs，一个用于运行 AoT 构建。它们都在 compilerOptions

中设置了这个标志

"allowSyntheticDefaultImports": true

---

(之前的回答)

我遇到了这个确切的问题。我能够让它与以下项目一起工作:

var moment = require('moment'); //works

相对于

import moment from "moment"; // won't work

或

import moment = require('moment'); //won't work

在我的汇总配置中，我还有:

commonjs({
        include: [
            'node_modules/rxjs/**', 
            'node_modules/moment/**', 
            'node_modules/hammerjs/**'
        ]
    }),

给我指明正确方向的是 this SO answer类似的问题。

上述解决方案适用于 SystemJs 和 Angular 的 AoT/Rollup 流程。感觉有点 hack-ish，因为它不是导入模块的“典型” typescript 方式，但它让我解决了这个问题。