错误：无法解析打字稿angle2中的lodash-mixins

Question

我正在尝试添加自定义功能以扩展lodash（请注意，Lodash是npm'ed的）。 但是我一直收到解决错误。

我在测试项目脚本文件夹中添加了一个名为lodash-mixins.js的新文件，例如：project / frontend / src / web / Scripts /

var _ = require('lodash');
_.mixin({
    mixinLoaded function () { console.log("lodash mixins  are loaded");}
});
module.exports = _;

概述文件夹结构（简体）

项目/前端/ src目录/网络

... frontend.web.csproj
...角cli.json

项目/前端/ src目录/网页/脚本/

... lodash-mixins.js

项目/前端/ src目录/网络/应用/
... app.module.ts

我已经将“ lodash-mixins.js”手动添加到“ angular-cli.json”中

"apps": [
    {
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",

        etc
        "../node_modules/lodash/lodash.min.js",
        "../Scripts/lodash-mixins.js",  //     <<<<< not picking up
        "../Scripts/global-error-handler.js",
      ],

通过更改我的其中一个test.service.ts中的现有引用来进行测试：

"import * as _ from 'lodash';"

至：

"import * as _ from 'lodash-mixins';"

我已经很好地重建了我的C＃解决方案。

在CLI中运行：$ ng build --watch

在project / frontend / src / web / app / test / services / test.service.ts中发生错误找不到模块：错误：无法解析'lodash-mixins

有任何想法吗？

Answer 1

您在这里混淆了两件事。

1）Angular CLI的“脚本”配置告诉WebPack在输出包中包括那些JavaScrip文件。 它不会将那些添加为可导入模块。 就像您在HTML文件中添加<script src="...">标签一样，它们会被加载（虽然不完全准确，但是给出了建议）。

2）使用TypeScript import它会搜索模块。 出现此错误的原因是该文件不在搜索路径之一中。 如果它实际上找到了文件。 它将加载两次。 由于您已经将其添加到“脚本”配置选项中。

可以使用模块或仅使用普通全局变量来加载JQuery，Lodash等。 当您将其添加到“脚本”配置中时，我认为这告诉WebPack将其加载到全局浏览器空间中。

当您在TypeScript中使用“从'lodash'导入_“时。 您实际上是在解决人们经常安装的“ @ types / lodash”模块，以便TypeScript知道lodash的接口。 当WebPack为浏览器捆绑所有内容时，它会交换@types以真正引用lodash实例。

因此，您有两种选择。

1）继续您的工作。 在名为“ lodash-mixin”的新模块的导入路径中添加TypeScript定义文件。 该模块仅使用新方法定义新接口。 导入将找到该文件并将其用于编译TypeScript，但WebPack捆绑包将在其位置加载JS文件。

2）从“脚本”配置中删除“ lodash-mixin”，然后使用相对路径import _ from '../Scripts/lodash-mixins' 。 这就是我通常要做的。 注意：您可能必须添加文件扩展名“ .js”

3）将您的“脚本”文件夹作为类型根tsconfig.json之一添加到tsconfig.json中。 这使您可以仅使用import _ from 'lodash-mixins' 。

4）有一种方法（我完全忘记了如何做），但是您可以告诉TypeScript将lodash别名为lodash-mixin，以便所有导入都使用该类型。 我不推荐这种方法。