web-dev-qa-db-ja.com

Angular CLI：__WEBPACK_IMPORTED_MODULE_1_jquery __（...）。collapseは関数ではありません

Angular CLI（Angular 4）を介して生成されたApp Componentがあります。

私はjQuery + Bootstrapのように持ってきました：

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

私のアプリコンポーネントは次のようになります。

import { Component, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [

    './app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'app';

  constructor() { }

  ngAfterViewInit() {

    $('.nav a').click(function () {
        $('.navbar-collapse').collapse('hide');
    });
  }
}

次のエラーを受け取ります：

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).collapse is not a function

Bootstrapが正しくインポートされていませんか？）コンポーネントの上部に以下を追加してみました：

import 'bootstrap/dist/js/bootstrap.js';

編集：

気づいたことの1つ。ブラウザで実行しているときにChrome Consoleから次の行を実行すると、問題なく動作します。

$('.navbar-collapse').collapse('hide');

ここの違いは何ですか？私は何かを逃しているに違いない。

jquerytwitter-bootstrapangular
9
aherrick

コメントで述べたように、Bootstrap jqueryをグローバルにする必要があるという問題のようです。非常によく似た質問が次のリンクで回答されています：-

2つのフルカレンダーインスタンスAngularコンポーネントによりjquery not foundエラーが発生します

もう1つのオプションは、-cloudの回答で述べたように、折りたたみのタイプを定義することです

4
Krishnanunni Jeevan

以下の手順でこの問題を解決しました。

コンポーネントのjquery importコマンドを

import * as $ from 'jquery';

に

declare var $ : any;
14
Karthi Coimbatore

このような依存関係を指定しないでください。

bootstrapおよびjQueryをnpm/yarn経由でインストールしたので、他に何も設定せずにimport * as $ from 'jquery';のように直接インポートする必要があります。scriptsは必要ありません。

scripts configは、index.html内のスクリプトタグとしてグローバルスクリプトとして扱われることになっています。 ここでのスクリプトストーリー を参照してください。

collapseはbootstrapからのjqueryプラグインなので、次のようにする必要があります

interface JQuery {
  collapse(options?: any): any;
}

typeScriptにそのタイプを知らせます。

アップデート＃1

@types/bootstrapをインストールして、インターフェースの定義をスキップできます。

3
e-cloud

次のようにjqueryを呼び出してみてください：

    import $ from 'jquery/dist/jquery';
1
Karun Kamal

私のステップに従ってください

1）jQueryをインストールします。 （すでにインストールされている場合はスキップ）

npm install jquery --save

2）jQueryのタイプをインストールします。

npm install @types/jquery --save

3）jQueryをapp.module.ts。にインポートします

import * as $ from 'jquery';

4）インストールbootstrap 3では4ではないので、angular.jsonのbootstrap.bundle.min.jsを削除します

npm install bootstrap@3 --save

5）angular.jsonに正しい注入を追加します。順序は重要です

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

6）$（element）.collapseを使用するファイルに、インポート後にこれを追加します

    declare var $: any;

7）これで使用できます

    $(element).collapse();
1
Andrea Dompè