Import external script with angular and storybook 7

462 views Asked by At

I'm using a storybook 7 instance with angular 14 and want to import createjs. In angular.json createjs is being imported as a script:

"scripts": [
  {
    "input": "node_modules/createjs/builds/1.0.0/createjs.js",
    "inject": false,
    "bundleName": "createjs"
  }
]

The bundle is created as createjs.js and it's also being loaded. Nevetheless createjs is not defined in the components.

Usage is like this:

...
declare var createjs: any;
...

@Component({
...
})
export class SomeComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    console.log(createjs); // <-- undefined
  }
}

Doing exactly the same without storybook works well in angular.

The difference I saw is the way the script is being appended to the body. Storybook+Angular appends it as <script type="module">import createjs.js;</script> and Angular appends it as <script>source code of the script</script>;

The Storybook+Angular version leads to an undefined "this" inside of the loaded script itself.

I would really appreciate any thoughts on this! Thanks!

0

There are 0 answers