angular2错误:这个。$ modal.modal不是一个函数

时间:2017-01-05 14:42:02

标签: angular bootstrap-modal ng2-bootstrap

我收到错误:这个。$ modal.modal不是函数

我通过gulp文件从wwwroot文件夹中的Node_Module获取了ng2-bs3-modal。

我的文件夹结构是:

 - wwwroot
  - angularlibs
     - angular
     - bootstrap
     - core-js
     - rxjs
     - zone.js
  - ng2-bs3-modal
  - appScripts (js generated from typescripts)
 - Scripts (typescripts)
 - typings
 - gulpfile
 - package.json
 - project.json
 - .....

如果我将ng2-bs3-modal移动到Script(typescript)文件夹,则会出现jasmin zone.js错误。通过以上结构,我得到了这个。$ modal.modal不是一个函数"错误,因为来自ng2-bs3-modal的所有类型脚本都没有找到@ angular / core。

索引html中的

脚本标签按此顺序:                  

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"    rel="stylesheet">

 <link rel="stylesheet" ref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>

我尝试通过以下几个选项来解决: https://github.com/dougludlow/ng2-bs3-modal/issues/52 https://github.com/dougludlow/ng2-bs3-modal/issues/34

但没有运气。我是angular2的新手。非常感谢快速帮助。

2 个答案:

答案 0 :(得分:4)

在项目中安装jquery和bootstrap

npm install jquery
npm install bootstrap

然后在您使用此模态的文件(例如model-view.component.ts)中导入两者

import 'jquery';
import 'bootstrap';

对我来说,这完美无瑕地工作:)

答案 1 :(得分:0)

你应该包括这个:

<script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>

在你的其他依赖之后。我强烈建议您考虑使用动态模块加载器,例如systemJS或(我最喜欢的)webpack