Jquery UI layout is not working in typescript

Question

I'm using Jquery UI layout in typescript i have installed jquery, jquery-ui and jquery.ui.layout and this my following code

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 });
    });
  }   
}

but am getting following error in browser console

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)

Please help to sort out

Thanks in advance!

Answer 1

When i add a proper jq then this code is working file like below

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 });
        });
      }   
    }