Question

我正在尝试配置我的代码库，以便能够同时执行JiT和AoT，以便我可以将JiT用于本地开发，使用AoT进行生产。我已经跟随angular documentation here并成功地让两者都单独工作了。

我遇到的问题是当我尝试导入外部库时，特别是moment-js。

对于JiT，我使用的是SystemJS，其配置为

// systemjs.config.js

System.config({
    map: {
        // ...
        moment: '/node_modules/moment',
    },
    packages: {
        // ...
        moment: {
            defaultExtension: 'js'
        }
    }
});

然后要在typescript中导入一个组件，我就可以了

// some-component.component.ts

import * as moment from 'moment/moment';

这适用于本地开发。

当我尝试使用汇总进行AoT编译时，我收到Cannot call a namespace ('moment')编译错误。我在this thread here之后解决了这个问题，因此在对汇总配置进行一些更改之后，组件中的import语句应为

// some-component.component.ts

import moment from 'moment';

哪个适合AoT和汇总，但现在SystemJS有一个问题了解。

我似乎无法摆脱循环。我可以让一个工作，但不能同时工作。有没有办法让SystemJS理解汇总所需的import语句？我认为不可能反过来。

修改：

我确实找到了一种至少让它起作用的方法，但它并不完全理想。我只是将其声明为any，而不是导入它，然后在外部使用脚本标记加载库。所以现在组件是

// some-component.component.ts

declare const moment: any;

正如我所说，这并不理想，因为这并不能让我把时间与AoT构建捆绑在一起，而且它也会迫使打字稿来解释“时刻”。 var为any所以现在它还不知道它的类型。所以这仍然没有完全回答我的问题，但这至少有效。

Answer 1

继续导入：

import * as moment from 'moment';

将插件添加到rollup.js：

{
    name: 'replace moment imports',
    transform: code => ({
        code: code.replace(/import\s*\*\s*as\s*moment/g, 'import moment'),
        map: { mappings: '' }
    })
},

Answer 2

对于那些不希望添加自定义rollup.js插件或使用ng-packagr等打包工具的人，请考虑将import语句替换为以下解决方案：

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

此解决方案最初由以下Github问题提供：
https://github.com/dherges/ng-packagr/issues/217#issuecomment-339460255

Angular 2 - 为JIT和AoT导入外部库

2 个答案: