Question

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

我在.angular-cli.json中添加了样式和脚本。一切正常。

我在Jquery中使用了一些index.html相关代码，我面临以下异常

Uncaught ReferenceError: $ is not defined
at (index):95

如果我使用.angular-cli.json加载文件，它是否会反映在我的index.html？

Stackblitz example

我正在使用animation.css和animation.js。是否可以加载.angular-cli.json文件

AOS.init({
    easing: 'ease-in-out-sine',
    once:'true'
});

Answer 1

如果您在.angular-cli.json中添加jQuery脚本，它将被捆绑并在结束body标记之前添加，因此可能就在您的代码之后。因此，当执行流程到达您的代码时，$尚未定义。

在加载了所有js文件后，使用windonw.onload事件执行jQuery代码可以做什么

<body>
  <app-root></app-root>
</body>

<script>

  window.onload = function(){
    $('#abc').html('hello');
    }
</script>
</html>

我没有设法让它在stackblitz上运行，可能是因为它们加载脚本的方式。但它确实适用于正常项目

注意：如果你不是绝对需要，你不应该在角度项目中使用jQuery。如果你只需要它来进行引导，那么看一下ng-bootstrap库，它提供了一个角度原生的bootstrap实现

Answer 2

在component.ts中，只需声明如下

// Jquery declaration
declare var $: any;

@Component({
  selector: 'abc',
  templateUrl: './abc.html',
  styleUrls: ['./abc.scss']
})
export class ABCComponent implements OnInit{
}

Answer 3

安装

npm i --save jquery

声明

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;

从angular-cli.json加载bootstrap和jquery库

3 个答案: