Загрузите библиотеки начальной загрузки и jquery из angular-cli.json - PullRequest
Новая
       1

Загрузите библиотеки начальной загрузки и jquery из angular-cli.json

0 голосов
/ 01 июня 2018 
"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

I 'м, используя animation.css и animation.js.Можно ли загрузить в .angular-cli.json файл 

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

Ответы [ 3 ]

0 голосов
/ 01 июня 2018

Установить 

npm i --save jquery

Объявить 

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
0 голосов
/ 01 июня 2018

Если вы добавите свой скрипт jQuery в .angular-cli.json, он будет упакован и добавлен непосредственно перед закрывающим тегом body, так что, вероятно, сразу после вашего кода.Поэтому, когда поток выполнения достигает вашего кода, $ еще не определено.

Что вы можете сделать, используя событие windonw.onload, чтобы выполнить код jQuery после загрузки всех файлов js 

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

<script>

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

Мне не удалось заставить это работать на stackblitz, вероятно, из-за способа, которым они загружают сценарии.Но он работает в обычном проекте

Примечание : Вы не должны использовать jQuery в угловых проектах, если вам это абсолютно не нужно.Если вам просто требуется его для начальной загрузки, взгляните на библиотеку ng-bootstrap , которая предлагает встроенную угловую реализацию начальной загрузки

.
0 голосов
/ 01 июня 2018

Внутри вашего component.ts просто объявите, как показано ниже 

// Jquery declaration
declare var $: any;

@Component({
  selector: 'abc',
  templateUrl: './abc.html',
  styleUrls: ['./abc.scss']
})
export class ABCComponent implements OnInit{
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...