代码之家 › 专栏 › 技术社区 › codeepic zetriks

jQuery未在引导sass中定义

bootstrap-sass angular-cli webpack angular jquery

codeepic zetriks · 技术社区 · 7 年前

我使用Angular cli引导Angular 2应用程序。在我决定使用引导模式之前,一切都很简单。我只是从另一个不使用angular cli的项目中复制了打开modal的代码。我在angular cli中向脚本添加了jquery和引导依赖项。json文件。jQuery在项目中得到认可,但当我尝试运行 this.$modalEl.modal(options) 在角度分量内,我得到一个误差 jQuery is not defined

实际上,jQuery是作为全局变量导入到项目中的 $ .我做了一些挖掘,bootstrap显然希望jQuery作为“jQuery”变量传递给它。它根本不在乎

我可以揭露 jQuery 作为变量 webpack.config.js 像我们在其他项目中一样归档:(为了简洁起见省略了很多代码)

var jQueryPlugin = {
  $: 'jquery',
  jquery: 'jquery',
  jQuery: 'jquery'
}

exports.root = root;

exports.plugins = {
  globalLibProvider: new webpack.ProvidePlugin(webpackMerge(jQueryPlugin, {
    svg4everybody: 'svg4everybody/dist/svg4everybody.js'
  }))
}

angular-cli 开发团队决定不让其他开发人员干预网页包配置文件。谢谢大家!你想得真周到。

https://github.com/angular/angular-cli/issues/3202 (将导入添加到vendor.ts文件,然后将vendor.ts添加到angular cli.json中的脚本数组)但没有任何效果。

老实说,我很恼火,这么一个小问题,像添加 jquery bootstrap 在这里就是这样一个雷区。

你处理过类似的问题吗?

3 回复 | 直到 7 年前

Rahul Singh 7 年前

第一步

npm install jssha --save [using jssha for this demo]
It it is your own custom file place it in the scripts array of angular-cli.json skip this step 1

第二步

Add the jssha scripts file in .angular-cli.json file
"scripts": [ "../node_modules/jssha/src/sha.js" ]
Step three Adding a var in component to be used as a global variable

//using external js modules in Angular Component
declare var jsSHA: any; // place this above the component decorator
shaObj:any;
hash:string;
this.shaObj = new jsSHA("SHA-512", "TEXT");
this.shaObj.update("This is a Test");
this.hash = this.shaObj.getHash("HEX")

link .它有一个工作示例和一个问题,有打字和没有打字。我在那个项目中使用了bootstrap和jquery与Angular,你也可以检查回购。

在您的情况下,需要添加jquery文件

像这样在你的 angular-cli.json

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

declare var $: any;

这应该行得通。

更新

它可以检查此gh页面链接- LINK

如果你想对源代码进行同样的检查 LINK

我发布的答案来自这个链接,这是我在Angular上的页面 LINK

Matthew Daly 7 年前

最简单的解决方案是使用一个考虑角度的版本,我相信 ng-bootstrap 是其中最突出的。我自己没有使用过它,但我为angular 1使用了angular ui引导,这似乎是同一项目的angular 2对应项。

wrap it in a directive yourself

K Scandrett 7 年前

ng eject 让Angular CLI生成网页包。配置文件。