Блог

Я использую Angular-CLI (версию webpack) для своего проекта Angular 2, и мне также нужно использовать jQuery (к сожалению. В моем случае это зависимость от Semantic-UI, и я использую его для обработки выпадающих меню).

То, как я его использую:

 npm install jquery --save
  

Затем перечислите в нем angular-cli.json файл в scripts массиве:

 scripts": [
  "../node_modules/jquery/dist/jquery.min.js"
]
  

Таким образом, он включается в файл пакета, и этот файл автоматически используется для корневого файла html:

<script type="text/javascript" src="scripts.bundle.js">

Затем declare var $: any; в файлах, где мне это нужно, и это работает хорошо.

Однако есть проблема с ng test тестами, так как Karma выдает ошибку $ is not defined .

Это связано с тем, что тестируемый html-файл, предоставляемый Karma, не включает scripts.bundle.js файл, как это делает обычно обслуживаемая версия.

Решение простое; вы просто указываете тот же путь к файлу jquery karma.config.js в файл в корневой папке проекта. Этот файл доступен в корне проекта.

В files массив добавьте путь с watched таким флагом:

 files: [
  { pattern: './node_modules/jquery/dist/jquery.min.js', watched: false },    
  { pattern: './src/test.ts', watched: false }
]
  

Теперь Карма должен знать о зависимости jQuery.