Search code examples
angulartypescriptwebix

How to run webix filemanger correctly in angular 6


I am trying using filemanager in my angular 6 app, but I got an error unknown view: filemanager I have tried so many ways to fix but it is working with all view such as label, button an datatable but not with file manager

here is my code

import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
import * as webix from "webix";
import  'filemanager/codebase/filemanager';

declare let $$:any;
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {

  private ui : webix.ui.filemanager;

  constructor(root: ElementRef){
    webix.ready(()=>{
       this.ui = <webix.ui.filemanager> webix.ui({
                 rows:[
                     { view: "label", css: "header", label: "File Manager allows to upload files into selected folder."},
            {
                view:"filemanager",
                id:"files",
                handlers:{
                    "upload" : "https://jsonplaceholder.typicode.com/users",
                    "download": "https://jsonplaceholder.typicode.com/users",
                    "remove": "https://jsonplaceholder.typicode.com/users"
                }
            }
        ]
    });

    $$("files").load("https://jsonplaceholder.typicode.com/users");
   });
  }

    ngOnInit(){
      this.ui.resize();
   }
  ngOnDestroy(){
     this.ui.destructor();
    }
  } 

Solution

  • Unfortunately such approach will not work for now. ( Webix 6.1 ) While you can import the main library, extra widgets ( such as filemanager ) will still relay on global “webix” and will fail when webix is not available in the global scope.

    For now, the only working solution is to include webix.js as global script ( or configure toolchain to process webix imports as global script includes )

    New version of Webix will be released on February 22 (Webix 6.2), it will have updated packages for the extra widgets, which will work in the above case