错误：无法在 typescript angular2 中解析 lodash-mixins答案

【问题标题】：Error: Can't resolve lodash-mixins in typescript angular2错误：无法在 typescript angular2 中解析 lodash-mixins
【发布时间】：2017-10-18 07:57:21
【问题描述】：

我正在尝试添加自定义功能来扩展 lodash（注意 lodash 是 npm 的）。但我不断收到解决错误。

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

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

概览文件夹结构（简化）

项目/前端/src/web

...frontend.web.csproj
...angular-cli.json

项目/前端/src/web/Scripts/

...lodash-mixins.js

项目/前端/src/web/app/
...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

项目/前端/src/web/app/test/services/test.service.ts 中的错误未找到模块：错误：无法解析 'lodash-mixins

有什么想法吗？

【问题讨论】：

有点离题——但可能有助于消除依赖github.com/you-dont-need/You-Dont-Need-Lodash-Underscore
真正的工作是针对依赖于 lodash 并且还支持许多浏览器的现有实现。 - 但无论如何都要欢呼

标签： javascript angular typescript lodash

【解决方案1】：

你在这里混淆了两个不同的东西。

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

2) 当你 import 使用 TypeScript 时，它会搜索模块。它给出错误的原因是因为该文件不在搜索路径之一中。如果它真的找到了文件。它会加载两次。由于您已经将其添加到“脚本”配置选项中。

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

当你在 TypeScript 中使用“import _ from '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 作为类型根之一。这允许您只使用import _ from 'lodash-mixins'。

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

【讨论】：