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

Question

我尝试调整我的角度应用程序,为AOT编译和Tree Shaking(汇总)做好准备.但是我使用没有默认导出的模块(immutable.js,moment.js,...)会遇到问题.根据typscript(看这里),只能使用以下语句使用这些模块:import x = require('x')或者import * as x from 'x' 两个语句在汇总期间都会导致问题.在某些情况下,我在汇总期间收到错误:Cannot call a namespace ('x')在某些情况下,我收到运行时错误:x is undefined

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

在AOT编译和汇总期间,我需要一种方法来使用像immutable.js,moment.js这样的包.有没有办法做到这一点？

谢谢!

Answer 1

UPDATE

我之前的回答遇到了问题.以下是我在SystemJs中使用AoT /汇总的解决方案.

我的import语句如下:

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/**'
        ]
    }),

那我指出了正确的方向事情是这样的SO回答一个类似的问题.

上述解决方案适用于SystemJ和Angular的AoT/Rollup流程.它感觉有点破解,因为它不是导入模块的"典型"打字方式,但它让我解决了这个问题.