Angular6 и JQuery - макет не является функцией с кармой

Question

Я использую немного JQuery, чтобы обойти визуальную ошибку в библиотеке, которую я использую.Это работает хорошо, но теперь, когда я работаю над проверенной версией, я столкнулся с ошибкой.

Итак, в моем компоненте у меня есть:

declare var $: any;

@Component({ // })
export class MainComponent {
    constructor() {
        $('body').layout('fix')
    }
}

In karma.conf.js, у меня есть следующая строка:

files: [
  '../node_modules/jquery/dist/jquery.min.js',   
],

И когда я запускаю ng test, появляется эта ошибка:

TypeError: $(...).layout is not a function

Любое предложение будет оценено.

Answer 1

Ссылка на ваш файл JQuery в angular.json разделе scripts файла.

Вот структура angular.json - https://github.com/angular/angular/blob/master/aio/angular.json

Также я рекомендую написать код в ngOnInit() метод вместо constructor().

Answer 2

Шаги:

1) В index.html поставить метку ниже строки.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2) В файле ts компонента ниже вы должны объявить varвот так

import { Component } from '@angular/core';
declare var jquery:any;
declare var $ :any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit(){
    $('body').layout('fix'); //
  }

}

теперь вы можете использовать его как хотите.если он не работает с karma, попробуйте определить его следующим образом:

files: [
  { pattern: './node_modules/jquery/dist/jquery.min.js', watched: false },    
]

make watched option false

Answer 3

Оберните его вокруг документа готово.

constructor() {
     $(document).ready(function() {
        $('body').layout('fix')
     });
}   

Но я настоятельно рекомендую использовать jquery как можно меньше с угловыми