在角度模板中使用jquery ui小部件

我有一个角度项目,我没有在任何接近jquery ui复选框的css库中找到好看的复选框,我想在我的角度项目中使用这些复选框。 使用jquery,您可以在页面加载后使用以下代码设置复选框的样式…

$(document).ready(function(){
    $(":checkbox").checkboxradio();
});

提供了使用…导入的jQuery库。index.html文件中的类似内容

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

尽管我已经在npm中安装了jquery,但可能还有其他方法可以做到这一点。然后在我的组件中,我在导入之间声明了一个变量,并在初始化之后调用jquery函数。

import { Component, AfterViewInit } from '@angular/core';

declare var $:any;

@Component({
  selector: 'app-test',
  template: `<label for="checkbox1">checkbox 1</label>
            <input type="checkbox" name="checkbox1" id="checkbox1">`
})
export class CrimeTableComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    $(document).ready(function(){
      $( "#checkbox1" ).checkboxradio({
        icon: false
      });
    });
  }

我一直在 Uncaught TypeError: $(...).checkboxradio is not a function

这是可能的还是我做错了什么?