Как использовать плагин jQuery с Angular 4?

установите jquery с npm

npm install jquery --save

добавить typings

npm install --save-dev @types/jquery

добавление скриптов в angular-cli.json

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ],
  ...
}]

строительство и служить

ng build

надеюсь, что это помогает! Наслаждайтесь кодированием

вы не обязаны объявлять какую-либо переменную jQuery при установке @types/jquery.

declare var jquery:any;   // not required
declare var $ :any;   // not required

вы должны иметь доступ к jQuery везде.

следующее должно работать:

jQuery('.title').slideToggle();

установить jQuery с помощью NPM jQuery NPM

npm install jquery

установите файл объявления jQuery

npm install -D @types/jquery

импорт jQuery внутри .ТС

import * as $ from 'jquery';

вызов внутри класса

export class JqueryComponent implements OnInit {

constructor() {
}

ngOnInit() {
    $(window).click(function () {
        alert('ok');
        });
    }

}

попробуйте это:

import * as $ from 'jquery/dist/jquery.min.js';

или добавить скрипты в angular-cli.json:

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

и в вашем .файл ТС:

declare var $: any;

вы не должны использовать jQuery в Angular. Хотя это возможно (см. другие ответы на этот вопрос), это обескураживает. Зачем?

Angular имеет собственное представление DOM в своей памяти и не использует селекторы запросов (такие функции, как document.getElementById(id)), такие как jQuery. Вместо этого все DOM-манипуляции выполняются с помощью Renderer2 (и угловых директив, таких как *ngFor и *ngIf, обращающихся к этому Renderer2 в фоновом режиме/framework-code). Если вы сами манипулируете DOM с помощью jQuery, вы будете рано или поздно...

1. запуск в проблемы синхронизации и есть вещи неправильно появляются или не исчезают в нужное время с экрана
2. есть проблемы с производительностью в более сложных компонентах, так как внутреннее DOM-представление Angular связано с зоной.js и его механизм обнаружения изменений-поэтому обновление DOM вручную всегда будет блокировать поток, на котором работает ваше приложение.
3. есть другие запутанные ошибки, которые вы не знаете происхождения из.
4. не будучи в состоянии проверить приложение правильно (Жасмин требует, чтобы вы знали, когда элементы были оказаны)
5. не имея возможности использовать угловые универсальные или веб-рабочие

если вы действительно хотите включить jQuery (для duck-taping какой-то прототип, который вы на 100% окончательно выбросите), я рекомендую, по крайней мере, включить его в свой пакет.json с npm install --save jquery вместо того, чтобы получить его из CDN google.

TLDR: для изучение того, как манипулировать DOM угловым способом, пожалуйста, сначала пройдите официальный учебник tour-of heroes:https://angular.io/tutorial/toh-pt2 Если вам нужно получить доступ к элементам выше в иерархии DOM (parent или document body) или по какой-то другой причине директивы типа *ngIf,*ngFor, пользовательские директивы, трубы и другие угловые утилиты, такие как [style.background],[class.myOwnCustomClass] не удовлетворяйте ваши потребности, используйте Рендерер2: https://www.concretepage.com/angular-2/angular-4-renderer2-example

вы можете обновить версию jQuery typings так

npm install --save @types/jquery@latest

У меня была такая же ошибка, и я был, если в течение 5 дней серфинг в сети для a solution.it работал для меня, и это должно работать для вас

Если у вас есть необходимость использовать другие библиотеки в проектах --typescript-- не только в проектах - угол - вы можете искать tds (файл объявления TypeScript), которые являются depares и которые имеют информацию о методах, типах, функциях и т. д. , который может быть использован TypeScript, как правило, без необходимости импорта. объявить var-это последний ресурс

npm install @types/lib-name --save-dev

вы можете использовать webpack к обеспечить его. Затем он будет введен DOM автоматически.

module.exports = {
  context: process.cwd(),
  entry: {
    something: [
      path.join(root, 'src/something.ts')
    ],
    vendor: ['jquery']
  },
  devtool: 'source-map',
  output: {
    path: path.join(root, '/dist/js'),
    sourceMapFilename: "[name].js.map",
    filename: '[name].js'
  },
  module: {
    rules: [
      {test: /\.ts$/, exclude: /node_modules/, loader: 'ts-loader'}
    ]
  },
  resolve: {
    extensions: ['.ts', '.es6', '.js', '.json']
  },
  plugins: [

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),

  ]
};

попробуйте использовать - объявить пусть $ :любой;

или импортировать * как $ из 'jquery/dist / jquery.минута.js'; укажите точный путь к lib

ngOnInit() {
     const $ = window["$"];
     $('.flexslider').flexslider({
        animation: 'slide',
        start: function (slider) {
          $('body').removeClass('loading')
        }
     })
}