web-dev-qa-db-ja.com

Angular 6 ReferenceError：$ is not defined error with JQuery

Foundationにangular 6をインストールしましたが、JQueryでエラーが発生します。

キャッチされていない構文エラー：予期しない識別子ReferenceError：$は定義されていません

私のコンポーネントでは、私は持っています

declare var $:any

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

Angular.jsonにすべてのインポートがあります

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

私はインターネットで見つけたものをすべて試しましたが、それでも同じエラーに直面しています。また、これを追加するには、Angular 4

jqueryangularzurb-foundationzurb-foundation-6
10
user3701188

これは、ES6モジュールの分離が機能する方法に関連するものです。 angular.jsonファイルは、index.htmlファイルのスクリプトタグと同じです（グローバルスコープ）。コンポーネントにインポートすると、新しいローカルコピーが取得されるため、この方法でインポートしないでください。

インテリセンスとコンパイルの問題を防ぐには、typings.d.ts次の内容のファイル：

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

これで準備完了です:)

7
elvin

角度用のJqueryプラグインをインストールする

npm install jquery --save

app.module.ts 追加

import * as $ as "jquery";

作業が完了します。

4
BlizZard

Jqueryがインストールされていて、まだこのエラーが発生する場合。 $を使用しているすべてのコンポーネントで、一番上に追加import * as $ from "jquery";

3
karoluS

これに対する答えを探している人のための解決策は、ノードタイプをインポートすることです（--save jqueryとfoundation-sitesをインストールするためにすでにnpmを使用していると仮定しています）：

npm install --save @types/node

その後、tsconfig.app.jsonモジュールの下で、typesセクション（compilerOptionsの下）が次のようになっていることを確認します。

"types": ["node"]

あなたのコードで：

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

.... other declarations etc... 

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

私は例としてドロップダウンメニューを使用していますが、これはさまざまな基盤プラグインのすべてで機能するはずです（ただし、テストしていません）。

1
tstopak

あなたのパスが正しいことを確認してください？

これを試してください[../node_modules/jquery/dist/jquery.js]

0
Fawad Mukhtar

JQueryタイプを追加してみてください。npmからjQueryをインストールした後にこれを行います。

npm install --save @ types/jquery

0
Dale C