Import plain-draggable into Angular library project

[romawu]

Hi @anseki,

I am still working with plain-draggable and am currently trying to integrate it into Angular (12). Initially not into an application project, but first into an Angular library, which I then want to use in a project.

I have installed plain-draggable via the npm i plain-draggable command and declared it with declare let PlainDraggable: any; in my component.ts file. Unfortunately, when I call the constructor I get the error message: ERROR ReferenceError: PlainDraggable is not defined.

My method is as follows to get an idea of what I do in the case:

addNode() {
    /**
     * create node and set attributes
     */
    let node = document.createElementNS("http://www.w3.org/2000/svg", "g");
    let factory = this.componentFactoryResolver.resolveComponentFactory(NodeComponent);
    let componentRef = factory.create(this.injector, [], node);

    let dragNode = new PlainDraggable(node);

    /**
     * render node in angular view
     */
    this.appRef.attachView(componentRef.hostView);
    this.renderer.setAttribute(node, "ng-node", "");
    this.renderer.setAttribute(node, "id", "node-" + (this.nodes.length+1))
    this.renderer.appendChild(this.graph.nativeElement, node);

    /**
     * add node to graph data structure
     */
    this.nodes.push(node);
  }

Except for the line with PlainDraggable, the rest works exactly as it should and is error-free. Do you have any idea what could be the reason for my error? I'm surely missing some configuration, after a long search I haven't found the solution yet.

Thank you in advance for your efforts!

[romawu]

Hi guys! I got it up and running.

If anyone reading this is also trying to use plain-draggable in Angular, here's the solution: you need to specify it in the scripts field in angular.json.

I was misled by the special case of building an Angular library and it not providing a scripts configuration field in the angular.json. The trick here is that you define the dependency in the application that implements your Angular library.

I asked and self-answered this question on StackOverflow, where you can find a slightly more comprehensive breakdown with code snippets.

[anseki]

Hi @romanzimnik, thank you for the information. Also, you can import the library by using bundler such as Webpack.

[michaelkariv]

I have created a tester project on github, works with Angular 13, and, important for me, SVG element is draggable. Here goes: https://github.com/michaelkariv/plain-draggable-angular-svg-test

[anseki]

Hi @michaelkariv, thank you for the information. Note that a StackBlitz project differs from a normal Angular project. Some libraries can't seem to work with StackBlitz.