Макет JQuery UI не работает в машинописи

Question

Я использую Jquery UI макет в машинописи я установил jquery, jquery-UI и jquery.ui.layout и это мой следующий код

app.component.html

<div id="test">
<div class="ui-layout-center">Center</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</div>

app.component.ts

import { Component } from '@angular/core';
import * as $ from 'jquery';
import 'jquery-ui';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor() {
   // let topElem: HTMLElement = <HTMLElement> document.querySelector("body");

    $(document).ready(function () {
      (<any>$('body')).layout({ applyDefaultStyles: true });
    });
  }   
}

но я получаю следующую ошибку в консоли браузера

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_1__(...).layout is not a function
    at HTMLDocument.<anonymous> (app.component.ts:20)
    at mightThrow (jquery.js:3534)
    at process (jquery.js:3602)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2054)

Пожалуйста, помогите разобраться

Заранее спасибо!

Answer 1

Когда я добавляю правильный jq, тогда этот код работает как показано ниже

import { Component } from '@angular/core';    
import * as a$ from 'jquery';
    declare var $: JQueryStatic;

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'app';
      constructor() {
       // let topElem: HTMLElement = <HTMLElement> document.querySelector("body");

        $(document).ready(function () {
          (<any>$('body')).layout({ applyDefaultStyles: true });
        });
      }   
    }