0.0.2 • Published 2 years ago

@letterflow/ngx-dynamic-script-loader v0.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

NgxDynamicScriptLoader

Small Angular library to dynamically load and inject remote JS scripts into the DOM on-demand.

Install

Using yarn:

yarn add @letterflow/ngx-dynamic-script-loader

Using npm:

npm install --save @letterflow/ngx-dynamic-script-loader

Usage

Using the library with default configuration:

import {NgxDynamicScriptLoaderModule} from '@letterflow/ngx-dynamic-script-loader';

@NgModule({
  imports: [..., NgxDynamicScriptLoaderModule]
})
export class ExampleModule {}

Using the library with custom configuration:

import {NgxDynamicScriptLoaderModule} from '@letterflow/ngx-dynamic-script-loader';

@NgModule({
  imports: [
    ...,
    NgxDynamicScriptLoaderModule.withConfig({
      async: false,
      skipError: false,
    })
  ]
})
export class ExampleModule {}

Providing configuration using NgxDynamicScriptLoaderConfig InjectionToken:

import {
  NgxDynamicScriptLoaderModule,
  NgxDynamicScriptLoaderConfig,
} from "@letterflow/ngx-dynamic-script-loader";

@NgModule({
  imports: [NgxDynamicScriptLoaderModule],
  providers: [
    {
      provide: NgxDynamicScriptLoaderConfig,
      useValue: {
        async: false,
        skipAbort: false,
        skipError: false,
        onLoad(script) {
          console.log(script);
        },
      },
    },
  ],
})
export class ExampleFeatureModule {}

Configuration

When calling NgxDynamicScriptLoader#loadScript, configuration provided in the methods argument, will be merged with the current value provided by the NgxDynamicScriptLoaderConfig InjectionToken.

All callbacks default to a noop function.

Here is a list of possible configuration fields in NgxDynamicScripLoaderConfig:

  • async: boolean

    Value to use for the async attribute in the injected HTMLScriptElement.

    Default: true.

  • skipAbort: boolean

    Whether to throw an error when the onabort event fires on the HTMLScriptElement.

    Default: true.

  • skipError: boolean

    Whether to throw an error when the onerror event fires on the HTMLScriptElement. Note: When loading a list of scripts and this field is set to true, all subsequent scripts will not be loaded.

    Default: true.

  • onLoad: (reason) => void

    Callback that fires when the onload event occures.

    Default: noop.

  • onAbort: (reason) => void

    Callback that fires when the onabort event occures.

    Default: noop.

  • onError: (reason) => void

    Callback that fires when the onerror event occures.

    Default: noop.