【问题标题】:angular2 Error : this.$modal.modal is not a functionangular2 错误:this.$modal.modal 不是函数
【发布时间】:2017-05-20 03:49:27
【问题描述】:

我收到错误:this.$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 错误。使用上述结构,我收到“this.$modal.modal is not a function”错误,因为来自 ng2-bs3-modal 的所有打字稿都没有找到 @angular/core。

index 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 的新手。快速帮助将不胜感激。

【问题讨论】:

  • 你在用cli吗?

标签: angular bootstrap-modal ng2-bootstrap


【解决方案1】:

你应该包括这个:

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

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

【讨论】:

    【解决方案2】:

    在你的项目中安装 jquery 和 bootstrap

    npm install jquery
    npm install bootstrap
    

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

    import 'jquery';
    import 'bootstrap';
    

    对我来说,这完美无缺:)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-08-04
      • 1970-01-01
      • 2021-03-24
      • 2023-03-05
      • 1970-01-01
      • 2018-11-07
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多