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

【问题标题】：Angular 2 - Import external libraries for both JIT and AoTAngular 2 - 为 JIT 和 AoT 导入外部库
【发布时间】：2017-04-21 09:23:06
【问题描述】：

我正在尝试将我的代码库配置为能够同时执行 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'
        }
    }
});

然后在打字稿中导入一个组件，我可以这样做

// some-component.component.ts

import * as moment from 'moment/moment';

这对本地开发非常有效。

但是，当我尝试使用汇总进行 AoT 编译时，我收到了 Cannot call a namespace ('moment') 编译错误。我在this thread here 之后解决了这个问题，所以在对汇总配置进行了几次更改后，组件中的导入语句应该是

// some-component.component.ts

import moment from 'moment';

这对于 AoT 和汇总非常有效，但现在 SystemJS 无法理解这一点。

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

编辑：

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

// some-component.component.ts

declare const moment: any;

正如我所说，这并不理想，因为这不允许我将 moment 与 AoT 构建捆绑在一起，而且它还强制 typescript 将“moment”变量解释为any，所以现在它不知道关于它的类型。所以这仍然不能完全回答我的问题，但这至少有效。

【问题讨论】：

我是你提到的线程的 OP。您是否设法找到更好的方法来做到这一点？我很好奇为什么似乎没有人谈论这个，这是一个相当严重的限制......
很遗憾没有。我对那个特定项目的唯一依赖是时刻，所以我决定只使用我的 hacky 解决方案，因为我找不到任何其他方法来做到这一点。我考虑了其他选项，例如尝试使用环境变量来控制使用哪个导入语句，但我从未尝试过。我也想知道 webpack 是否可以处理 AoT 之类的导入，但同样，从未尝试过。

标签： angular systemjs rollupjs angular2-aot

【解决方案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: '' }
    })
},

【讨论】：

请不要添加same answer to multiple questions。一旦您获得足够的声誉，就回答最好的一个并将其余的标记为重复。如果不是重复的，请根据问题调整帖子。
你上面有红色问题吗？它根本不是重复的 - 可以类似的方式解决。

【解决方案2】：

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

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

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

【讨论】：