Javascript 在使用网页包Encore的角度数据表中找不到数据表

我一直在将Symfony应用程序从

3.4

升级到

4.2.2

，一切正常，但我无法通过Thread安装和网页包encore使DataTables正常工作

我是怎么安排的 纱线安装：

yarn add jquery@2.1.4
yarn add angular@1.4.8
yarn add datatables.net@1.10.19
yarn add datatables.net-dt@1.10.11
yarn add angular-datatables@0.6.2

TypeError: _oTable.ngDestroy is not a function
    at _destroyAndCompile (angular-datatables.js:947)

将这些文件与jQuery一起添加到我的网页

app.js

：

var $ = require('jquery');
require('datatables.net');
require('datatables.net-dt');
require('angular');
require('angular-datatables');

包括我的网页配置文件中的

app.js

：

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .addEntry('app', './assets/js/app.js')

    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

并通过以下方式将上述内容包含在我的前端模板中：

{{ encore_entry_script_tags('app') }}

错误 以上导致以下Javascript错误，这似乎表明DataTables API不可访问

Uncaught TypeError: Cannot read property 'Api' of undefined
at initAngularDataTables (angular-datatables.js:478)
at Object.invoke (angular.js:4523)

---

可能的解决办法 我尝试了以下黑客修复程序，但这意味着我必须将Angular代码放在同一app.js文件中，否则它将无法工作。这也意味着一些功能仍然失败

global.$ = global.jQuery = require('jquery');

require('jquery-ui');
require('bootstrap');
require('admin-lte');
require('datatables.net-dt');
global.moment = require('moment');

$.fn.dataTable = $.fn.DataTable = global.DataTable = require('datatables.net');

错误：

yarn add jquery@2.1.4
yarn add angular@1.4.8
yarn add datatables.net@1.10.19
yarn add datatables.net-dt@1.10.11
yarn add angular-datatables@0.6.2

TypeError: _oTable.ngDestroy is not a function
    at _destroyAndCompile (angular-datatables.js:947)

---

您的项目有

datatables.net

和

datatables.net dt

作为依赖项，它们都有自己的依赖项

（jQuery>1.7）

。如果您没有为项目指定jQuery版本，那么依赖关系树将以jQuery的最新版本结束，而您的依赖关系也将使用该版本

├─jquery@3.3.1
├─数据表。net@1.10.19
└─datatables.net-dt@1.10.11

但是如果您指定了一个旧版本的jQuery，那么依赖关系树最终会为您的依赖关系获取最新版本的jQuery（Thread这样做，npm不这样做，我不知道为什么）

├─jquery@2.1.4
├─数据表。net@1.10.19
│      └─jquery@3.3.1
└─datatables.net-dt@1.10.11
└─jquery@3.3.1

因此，在项目中有两个不同的jQuery

const jQuery = require('jquery')
console.log(jQuery.fn.jquery) // logs 2.1.4
const DataTable = require('datatables.net')
console.log(DataTable.$.fn.jquery) // logs 3.3.1

由于DataTable将自身绑定到jQuery的封装实例，

jQuery.fn.DataTable

是 显然

未定义

。要解决此问题，只需在应用程序中使用最新版本的jQuery 项目或者，您可以建议Thread对其所有依赖项使用固定版本的jQuery，在

package.json

文件中添加解析指令

"dependencies": {
    "angular": "1.4.8",
    "angular-datatables": "0.6.2",
    "datatables.net": "1.10.19",
    "datatables.net-dt": "^1.10.19",
    "jquery": "2.1.4"
},
"resolutions": {
    "jquery": "2.1.4"
}

---

然后执行

warn install

命令，您不需要的jQuery安装将得到处理。

您尝试过我发布的答案了吗？