NgScripter - One More Angular Script Loader

ng-scripter is a simple script loader that helps in loading external JS scripts on demand. This utility will help in decreasing the initial page load time since it gives the ability to load any JS script dynamically when required.

Installation

NPM:

npm i ng-scripter

Yarn:

yarn add ng-scripter

Setup

Import ScriptLoaderModule inside the module that requires it (AppModule or any other module)

import { ScriptLoaderModule } from 'ng-scripter';
 
@NgModule({
  ...
  imports: [
    ...
    ScriptLoaderModule
  ]
})

Usage

Inject the ScriptLoaderService inside a component/service

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private scriptLoaderService: ScriptLoaderService) {
  }

  loadScript = () => {
    const script: Script = {
      id: 'faker-id',
      src: 'https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js',
      async: true,
      defer: false,
      crossOrigin: 'anonymous'
    };
    this.scriptLoaderService.loadScript(script).subscribe(
      (data: Script) => console.log('Script Loaded ', data),
      (err) => console.log('Script failed ', err)
    );
  };

}

Options

The Script model has the following attributes.

Attribute	Required	Type	Description
id	Yes	string	An Id for the script. (Preferably Unique)
src	Yes	string	The source url
async	No	boolean	Async load or not (Default : false)
defer	No	boolean	Defer or not (Default : false)
crossOrigin	No	string	CORS

Usage of watch

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  private watcherSubscription: Subscription;
  ......  
  constructor(private scriptLoaderService: ScriptLoaderService) {
  }

  ngOnInit(): void {
      // get notified every time a new script is loaded the first time  
      this.watcherSubscription = this.scriptLoaderService.watch().subscribe(
        script => {
          console.log('Watcher => ', script);
        }
      );
    }
  
    ngOnDestroy(): void {
      if (this.watcherSubscription) {
        this.watcherSubscription.unsubscribe();
      }
    }

}

Other notable functions

1. isScriptLoaded : Checks if a script is loaded or not using the script Object. Returns true or false
2. isScriptLoadedViaSrc : Checks if a script is loaded or not using the script's src. Returns true or false
3. isScriptLoadedViaId : Checks if a script is loaded or not using the script's id. Returns true or false

Advantages over other script loaders

1. Avoids loading the same script multiple times
2. Ability to add initial delay before loading a script
3. Shared Observables used, so if a script is inProgress of loading and at that time another request to load that script comes in then the same instance of load is shared.
4. Various function to check if a script is loaded
5. Ability to get notified everytime a new script is loaded