Ошибка Angular 6 ReferenceEr: $ не определена ошибка с JQuery

Question

Я установил angular 6 с фундаментом, но получаю сообщение об ошибке с JQuery.

Uncaught syntaxerror: неожиданный идентификатор ReferenceError: $ не определено

В моем компоненте у меня есть

declare var $:any

onNgInit () {
  $(document).foundation()
}

У меня есть все импорты в моемangular.json

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

Я перепробовал все, что нашел в интернете, но все еще сталкиваюсь с той же ошибкой.Также, чтобы добавить это работало, когда я работал с Angular 4

Answer 1

Если у вас установлен jquery и вы все еще получаете эту ошибку.В каждом компоненте, где вы используете $, добавьте вверху import * as $ from "jquery";

Answer 2

Вы можете попробовать добавить типы jQuery, я делаю это после установки jQuery из npm.

npm install --save @ types / jquery

Answer 3

Это связано с тем, как работает изоляция модулей ES6.Загрузка из файла angular.json аналогична тегу script в файле index.html (глобальная область).Когда вы импортируете его в любой компонент, вы получаете новую локальную копию, поэтому не импортируйте его таким образом.

Чтобы избежать проблем со смыслом и компиляцией, создайте файл typings.d.ts со следующим содержимым:

declare var $: any;
declare var jQuery: any;

Теперь все готово:)

Answer 4

Для тех, кто ищет ответ на этот вопрос, решение состоит в том, чтобы импортировать типы узлов (я предполагаю, что вы уже использовали npm для установки --save jquery и foundation-sites):

npm install --save @types/node

затем в вашем tsconfig.app.json под вашим модулем убедитесь, что раздел типов (под compilerOptions) гласит:

"types": ["node"]

, затем в вашем коде:

import * as $ from 'jquery';
const Foundation = require('foundation-sites'); 

.... other declarations etc... 

new Foundation.default.DropdownMenu($("#yourelementid"), {}); 

Я использую выпадающее меню в качестве примера, но это должно работать со всеми различными базовыми плагинами (хотя я не проверял).

Answer 5

Установить плагин Jquery для угловых

npm установить jquery --save

Теперь в вашем app.module.ts add

import *как $ из "jquery";

Это сделает работу выполненной.

Answer 6

убедитесь, что ваш путь указан правильно?

попробуйте это [../node_modules/jquery/dist/jquery.js]