錯誤：無法解析打字稿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，以便所有導入都使用該類型。 我不推薦這種方法。