DataTables не найдены в Angular Datatables, использующих Webpack Encore - PullRequest
Новая
       22

DataTables не найдены в Angular Datatables, использующих Webpack Encore

0 голосов
/ 23 января 2019

Я обновлял приложение Symfony с 3.4 до 4.2.2, все в порядке, но я не могу заставить DataTables функционировать через установку пряжи и на веб-упаковке с angular-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

Добавил эти файлы в мой веб-пакет app.js вместе с jQuery: 

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

Содержит app.js внутри моего файла конфигурации Webpack: 

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, которая, по-видимому, показывает, что API DataTables недоступен. 

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



/* @ngInject */
function initAngularDataTables() {
    if ($.fn.DataTable.Api) {
        /**
         * Register an API to destroy a DataTable without detaching the tbody so that we can add new data
         * when rendering with the "Angular way".
         */
        $.fn.DataTable.Api.register('ngDestroy()', function(remove) {
            remove = remove || false;



Возможное решение

Я попробовал следующее хакерское исправление, но это значит, что мой 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');

Error 

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

1 Ответ

0 голосов
/ 31 января 2019

Ваш проект имеет datatables.net и datatables.net-dt в качестве зависимости, и оба они имеют свою собственную зависимость (jQuery>1.7).Если вы не укажете версию jQuery для своего проекта, ваше дерево зависимостей получит последнюю версию jQuery, которая также используется вашими зависимостями. 

├─jquery@3.3.1
├─datatables.net@1.10.19
└─datatables.net-dt@1.10.11

Но если вы укажете старую версию jQueryваше дерево зависимостей в конечном итоге получает последнюю версию jQuery для ваших зависимостей (пряжа делает это, npm - нет, я не знаю почему). 

├─jquery@2.1.4
├─datatables.net@1.10.19
│      └─jquery@3.3.1
└─datatables.net-dt@1.10.11
       └─jquery@3.3.1

В результате у вас есть 2 разных 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, очевидно, undefined.Чтобы решить эту проблему, просто используйте последнюю версию jQuery в своем проекте.Или вы можете порекомендовать yarn использовать фиксированную версию 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"
}

Затем выполните команду yarn install, и ваши нежелательные установки jQuery будутзаботиться о.

...