Question

我正在尝试添加自定义功能来扩展lodash（注意lodash 是npm'ed in）。但我一直在解决错误。

我在我的测试项目脚本文件夹中添加了一个名为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

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

有什么想法吗？

Answer 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）从“scripts”配置中删除“lodash-mixin”，然后使用相对路径import _ from '../Scripts/lodash-mixins'导入。这就是我通常做的事情。注意：您可能必须添加文件扩展名“.js”

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

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

错误：无法在typescript angular2

1 个答案: