jQuery не определен в bootstrap-sass

Я загрузил приложение Angular 2 с помощью angular-cli. Все было легко, пока я не решил использовать модальный бутстрап. Я просто скопировал код открытия модального окна из другого нашего проекта, в котором не используется angular-cli. Я добавил зависимости jquery и bootstrap к сценариям в файле angular-cli.json. jQuery распознается в проекте, но когда я пытаюсь запустить this.$modalEl.modal(options) внутри компонента angular, я получаю сообщение об ошибке jQuery is not defined.

На самом деле jQuery импортируется в проект, но как глобальный $. Я немного покопался, и, по-видимому, загрузчик ожидает, что jQuery будет передан в него как переменная jQuery. Это не дает крысе задницу о $.

Я мог бы указать jQuery как переменную в файле webpack.config.js, как мы это делаем в другом проекте: (большая часть кода опущена для краткости)

var jQueryPlugin = {
  $: 'jquery',
  jquery: 'jquery',
  jQuery: 'jquery'
}

exports.root = root;

exports.plugins = {
  globalLibProvider: new webpack.ProvidePlugin(webpackMerge(jQueryPlugin, {
    svg4everybody: 'svg4everybody/dist/svg4everybody.js'
  }))
}

но команда разработчиков angular-cli решила не позволять другим разработчикам вмешиваться в файлы конфигурации веб-пакета. Спасибо, парни! Очень заботливо с твоей стороны.

Я пытался импортировать jQuery непосредственно в компонент Angular и множество других вещей, упомянутых здесь https://github.com/angular/angular-cli/issues/3202 (добавление импорта в файл vendor.ts, а затем добавление vendor.ts в массив скриптов в angular-cli.json), но ничего не работает.

Честно говоря, я очень зол, что такая тривиальная проблема, как добавление зависимости jquery для использования с bootstrap в angular-cli, является таким минным полем.

Вы сталкивались с подобной проблемой?


webpack angular jquery angular-cli bootstrap-sass
person codeepic    schedule 26.07.2017    source источник
comment
Как вы говорите, почему команда разработчиков angular-cli решила не позволять другим разработчикам вмешиваться в файлы конфигурации веб-пакета?   -  person K Scandrett    schedule 29.07.2017
comment
@KScandrett, потому что angular-cli не предоставляет файл конфигурации веб-пакета. Вы настраиваете приложение через angular-cli.json. Angular-cli создает конфигурацию веб-пакета на его основе, но нет простого способа отредактировать файл конфигурации веб-пакета, не прибегая к некоторым хакам. Команда решила абстрагироваться от конфигурации веб-пакета, потому что это довольно сложно для непосвященных. Я не согласен с их решением, потому что это усложняет настройку некоторых вещей, которые вы не можете установить в файле angular-cli.json.   -  person codeepic    schedule 01.08.2017
comment
Почему бы просто не извлечь его ng eject и не отредактировать?   -  person K Scandrett    schedule 01.08.2017
comment
Это справедливое замечание. github.com/angular/angular-cli/wiki/eject Можете ли вы еще использовать генераторы angular-cli после того, как вы выбросили приложение?   -  person codeepic    schedule 01.08.2017
comment
Я не пробовал. Если генераторы не работают, вы можете выполнить github.com/aspnet /JavaScriptServices/issues/.   -  person K Scandrett    schedule 02.08.2017

Ответы (3)


arrow_upward
4
arrow_downward

Шаг первый

npm install jssha --save [using jssha for this demo]
It it is your own custom file place it in the scripts array of angular-cli.json skip this step 1

Шаг второй

Add the jssha scripts file in .angular-cli.json file
"scripts": [ "../node_modules/jssha/src/sha.js" ]
Step three Adding a var in component to be used as a global variable

//using external js modules in Angular Component
declare var jsSHA: any; // place this above the component decorator
shaObj:any;
hash:string;
this.shaObj = new jsSHA("SHA-512", "TEXT");
this.shaObj.update("This is a Test");
this.hash = this.shaObj.getHash("HEX")

Взгляните на эту ссылку. У него есть рабочий пример и вопрос к тому же с типизацией и без нее. В этом проекте я использовал bootstrap и jquery с Angular, вы также можете проверить репо.

В вашем случае вам нужно добавить файлы jquery

как это в вашем angular-cli.json

  "styles": [
    "../node_modules/bootstrap-v4-dev/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.min.js",
    "../node_modules/bootstrap-v4-dev/dist/js/bootstrap.min.js"

а затем объявить в компоненте.declare var $: any;

Это должно работать.

ОБНОВЛЕНИЕ

Я продолжил создание модального окна начальной загрузки, используя только jquery в Angular, используя шаги, которые я упомянул.

Это работает. Проверьте ссылку на эту страницу gh — ССЫЛКА.

и если вы хотите проверить исходный код для того же, проверьте ССЫЛКА.

Ответ, который я опубликовал, пришел по этой ссылке, это моя страница на Angular ССЫЛКА

person Rahul Singh    schedule 29.07.2017
comment
Но зачем мне добавлять jssha в мой проект? - person codeepic; 02.08.2017
comment
это демонстрация для вашего случая, это будет jquery, я упомянул об этом [using jssha for this demo] - person Rahul Singh; 02.08.2017
comment
Что ж, в таком случае ваш ответ не решит мою проблему, я уже добавил зависимость jquery к массиву скриптов в файле angular.cli.json. Проблема, похоже, в том, что jQuery выставляет $ как глобальную переменную, а bootstrap-sass ожидает знак jQuery, а не $. - person codeepic; 02.08.2017
comment
вам также необходимо объявить эту переменную в компоненте, например | declare var $: any; - person Rahul Singh; 02.08.2017
comment
declare var $: any; при условии, что я получаю ошибку в компоненте, но это не так. Я получаю «jQuery не определен» в модальном файле начальной загрузки. - person codeepic; 02.08.2017
comment
Вы определили bootstrap js в файле скриптов? - person Rahul Singh; 02.08.2017
comment
Да. Я сделал. В противном случае я бы получил ошибку типа thee is no method on $modalEl при попытке запустить этот код this.$modalEl.on('shown.bs.modal', () => this.onOpen()); - person codeepic; 02.08.2017
comment
я постараюсь добавить модальное и дам вам знать - person Rahul Singh; 02.08.2017
comment
Не беспокойтесь об этом. Я использовал ng-bootstrap, и он работает нормально. К черту jQuery и bootstrap-sass. - person codeepic; 02.08.2017
comment
это довольно просто, я тоже использовал его на своей веб-странице, и он работает как шарм, я ненавижу использовать модули для всего - person Rahul Singh; 02.08.2017
comment
Я знаю, как создать модальное окно только с помощью Angular, но вопрос был не в этом. Если я собираюсь использовать начальную загрузку для макета и различных компонентов, я также могу использовать его модальное окно. - person codeepic; 02.08.2017
comment
Спасибо, ваше приложение работает с angular-cli, jquery и bootstrap, хотя я использовал bootstrap-sass. Интересно, есть ли разница? Вы действительно приложили много усилий, чтобы помочь мне. Спасибо. Я хотел бы дать вам награду, но я уже дал ее Мэтью после того, как реализовал ng-bootstrap, как он рекомендовал. - person codeepic; 02.08.2017
comment
@codepic нет проблем, я не делал это за вознаграждение, просто это работает, нужно делиться информацией - person Rahul Singh; 02.08.2017

arrow_upward
1
arrow_downward

Я специально не использовал Bootstrap с Angular 2, но у меня есть с Angular 1, и ситуация такая же, поскольку обычная версия Bootstrap предназначена для работы с jQuery и не создана с учетом Angular. Вы, конечно, можете установить jQuery, но Javascript может не работать должным образом в контексте Angular.

Самое простое решение — использовать версию, созданную с учетом Angular, и я считаю, что ng-bootstrap является наиболее заметным из них. Я не использовал его сам, но я использовал angular-ui-bootstrap для Angular 1, и это похоже на аналог Angular 2 того же проекта.

Кроме того, вы можете обернуть его в сами , но я бы не стал этого делать, если вы можете заставить ng-bootstrap делать то, что хотите, поскольку это потребует гораздо больше работы.

person Matthew Daly    schedule 29.07.2017
comment
Ему придется перейти на Angular 4, чтобы использовать ng-bootstrap. Как только это будет сделано, их модальный компонент будет работать хорошо. - person ConnorsFan; 29.07.2017
comment
@Matthew Daly Это не совсем отвечает на мой вопрос, но, тем не менее, это лучшее решение. Ng-bootstrap довольно элегантен и не зависит от jQuery. Поэтому я заменил bootstrap-sass и jQuery на ng-bootstrap в своих зависимостях. - person codeepic; 02.08.2017
comment
Рад, что это решает вашу проблему. Очевидно, что вы можете создать свою собственную директиву, чтобы обернуть ее, если это необходимо (и иногда это единственное решение, особенно если вы работаете с чем-то относительно малоизвестным), но для чего-то столь же распространенного, как Bootstrap, почти всегда существующее решение, и если вам понадобится более одного компонента, вы сделаете много работы для себя, если решите сделать это самостоятельно. - person Matthew Daly; 02.08.2017

arrow_upward
1
arrow_downward

Вы можете использовать команду ng eject, чтобы Angular CLI сгенерировал файл webpack.config. .

Затем выставьте jQuery как переменную, как вы делали раньше.

person K Scandrett    schedule 02.08.2017