twitter-bootstrap Angular CLI：__WEBPACK_IMPORTED_MODULE_1_jquery__(...).collapse 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44938471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular CLI: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).collapse is not a function
提问by aherrick
I have an Angular App Component generated via the CLI (Angular 4).
我有一个通过 CLI (Angular 4) 生成的 Angular App 组件。
I've brought in jQuery + Bootstrap like so:
我像这样引入了 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"
],
My App Component looks like so:
我的应用程序组件如下所示：
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');
});
}
}
Receiving the following error:
收到以下错误：
ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).collapse is not a function
Is Bootstrap not being imported properly? I've tried adding the following to the top of my component:
Bootstrap 没有正确导入？我尝试将以下内容添加到组件的顶部：
import 'bootstrap/dist/js/bootstrap.js';
EDIT:
编辑：
One thing I've noticed. When running in the browser if I execute the following line through the Chrome Console it works without issue:
我注意到一件事。在浏览器中运行时，如果我通过 Chrome 控制台执行以下行，它可以正常工作：
$('.navbar-collapse').collapse('hide');
What would be the difference here? I must be missing something.
这里会有什么不同？我肯定错过了什么。
采纳答案by Krishnanunni Jeevan
As mentioned in the comment , it seems to be an issue of Bootstrap requiring jquery to be global. A very similar question is answered in the following link :-
正如评论中提到的，这似乎是 Bootstrap 的一个问题，要求 jquery 是全局的。以下链接回答了一个非常相似的问题：-
2 fullcalender instances in Angular component causes jquery not found error
Angular 组件中的 2 个 fullcalender 实例导致找不到 jquery 错误
The other option is define types for collapse as mentioned in -cloud's answer
另一个选项是定义折叠类型，如 -cloud 的回答中所述
回答by Karthi The Programmer
The below step resolved this issue for me..
以下步骤为我解决了这个问题..
I replaced the jquery import command in the component from
我替换了组件中的 jquery 导入命令
import * as $ from 'jquery';
to
到
declare var $ : any;
回答by e-cloud
You should not specify your dependencies like that.
你不应该这样指定你的依赖项。
Since you've installed bootstrap and jQuery via npm/yarn, you ought to import them directly like import * as $ from 'jquery';without configure something else. No scriptsis needed.
既然你已经通过 npm/yarn 安装了 bootstrap 和 jQuery，你应该像import * as $ from 'jquery';不配置其他东西一样直接导入它们。不需要scripts。
scriptsconfig is supposed to be treated as global script as script tag inside index.html, see the scripts story here.
scriptsconfig 应该被视为全局脚本作为内部脚本标记index.html，请参阅此处的脚本故事。
Since collapseis a jquery plugin from bootstrap, you should do something like
由于collapse是来自 的 jquery 插件bootstrap，您应该执行类似的操作
interface JQuery {
collapse(options?: any): any;
}
to let typescript know its types.
让打字稿知道它的类型。
update #1
更新 #1
you can install @types/bootstrapto skip defining the interfaces.
您可以安装@types/bootstrap跳过定义接口。
回答by Andrea Dompè
Follow my steps
按照我的步骤
1) Install jQuery. (skip if already installed)
1) 安装 jQuery。（已安装跳过）
npm install jquery --save
2) Install types for jQuery.
2) 为 jQuery 安装类型。
npm install @types/jquery --save
3) Import jQuery in app.module.ts.
3) 在app.module.ts 中导入 jQuery 。
import * as $ from 'jquery';
4) Install bootstrap 3 not 4, so remove any bootstrap.bundle.min.js in angular.json
4) 安装 bootstrap 3 而不是 4，因此删除angular.json中的所有 bootstrap.bundle.min.js
npm install bootstrap@3 --save
5) Add correct injection in angular.json, the order is important
5) 在angular.json 中添加正确的注入，顺序很重要
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
6) in the file where you use $(element).collapse add this after the imports
6) 在您使用 $(element).collapse 的文件中，在导入后添加
declare var $: any;
7) now you can use
7）现在你可以使用
$(element).collapse();
回答by Karun
Can you try calling jquery like :
您可以尝试调用 jquery 吗：
import $ from 'jquery/dist/jquery';
