[DrawSVGPlugin with Ionic3]

I know that I shouldn't do it. But after changing place of .js (eg. outside "src" folder) I have an error

Module '../../../vendors/DrawSVGPlugin' was resolved to 
            'd:/Ionic/TestAnimacja/vendors/DrawSVGPlugin.js', but '--allowJs' is not set. 

 

Also I needed to change way of importing to:

import * as DrawSVGPlugin from "../../../vendors/DrawSVGPlugin";

 

When I added in tsconfig.json a line:

"compilerOptions": {
  "allowJs": true,
}

 

I have that error:

[21:01:57]  typescript error 
            Cannot write file 'd:/Ionic/TestAnimacja/vendors/DrawSVGPlugin.js' because it would overwrite input 
            file. 
TypeError: Cannot read property 'replace' of null
    at Object.escapeHtml (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\util\helpers.js:253:9)
    at generateCodeBlock (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:187:77)
    at generateDiagnosticHtml (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:179:12)
    at Array.map (native)
    at Object.printDiagnostics (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:15:39)
    at d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\transpile.js:158:34
    at transpileWorker (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\transpile.js:107:12)
    at Object.transpile (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\transpile.js:64:12)
    at d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\build.js:109:82
[DEBUG] TypeError: Cannot read property 'replace' of null
             at Object.escapeHtml (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\util\helpers.js:253:9)
             at generateCodeBlock (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:187:77)
             at generateDiagnosticHtml (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:179:12)
             at Array.map (native)
             at Object.printDiagnostics (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:15:39)
             at d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\transpile.js:158:34
             at transpileWorker (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\transpile.js:107:12)
             at Object.transpile (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\transpile.js:64:12)
             at d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\build.js:109:82

 

[DrawSVGPlugin with Ionic3]

First of all Ionic uses Typescript. That's why it could be a problem.

 

After some testing I came to the conclusion:

No errors while using import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"

But when I added to the method where I'm making an animation this line - console.log(DrawSVGPlugin), happened something strange. In console it says "undefined" and the animation was done.

So maybe by using console.log I made an initialization of that plugin?

But on the other hand, console.log always says "undefined" value.

 

Maybe should I do something more besises pasting .js file in node_modules? I found folder called "src" with "minified" and "uncompressed" folders. Should I also put there other DrawSVGPlugin files?

[DrawSVGPlugin with Ionic3]

Hello.

Recently I bought a package which contains DrawSVGPlugin.

I want to implement this plugin in Ionic3 . As I know a npm package doesn't have plugins from club, nor @types/gsap. I added DrawSVGPlugin.js into node_modules/gsap and later recreated an android platform.

In .ts file as import I tried:

import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";

 

and as calling plugin:

TweenLite.to("#svg_1", 1, {drawSVG:"40% 60%", ease:Power1.easeInOut});

 

my html source of svg:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" preserveAspectRatio="none">
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="45.78805" x2="87.36405" y1="45.24458" x1="8.28813" stroke-width="12.5" stroke="#000" fill="none"/>
</svg>

 

Can anyone tell me what I am doing wrong? Or is there different way of doing it?