Load external libraries dynamically in Angular

To be able to load external libraries it is good to have a service which is responsible to load those scripts!

It will be looks like this

@Injectable({providedIn: 'root'})
export class ExternalLibrariesService {
  static injectLib(src: string): void {
    const script = document.createElement('script');
    script.src = src;
    document.body.appendChild(script);
  }
}

With that service we can easily add external libraries as much as we want!

Example usage

@Component({
  selector: 'app-root',
  template: ``,
})
export class AppComponent implements OnInit {
  private externalLibs = [
    'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js',
    'https://code.jquery.com/jquery-3.6.0.slim.min.js'
  ];
  ngOnInit(): void {
    this.externalLibs.forEach(libSrc => ExternalLibrariesService.injectLib(libSrc));
  }
}

Ability to add other important attributes

When we want to use libraries like bootstrap and jQuery CDN, on their site we can see they are using this attributes integrity and crossorigin on the script tag. Let's add these two to our method like this

static injectLib(src: string, integrity?: string, crossOrigin?: string): void {
    const script: HTMLScriptElement = document.createElement('script');
    script.src = src;
    if (integrity) {
      script.integrity = integrity;
    }
    if (crossOrigin) {
      script.crossOrigin = crossOrigin;
    }
    document.body.appendChild(script);
  }

And now let's introduce interface for external libraries in the app, like this

interface IExternalLib {
  src: string;
  integrity?: string;
  crossOrigin?: string;
}

Now we can update our usage example like this

@Component({
  selector: 'app-root',
  template: ``,
})
export class AppComponent implements OnInit {
  private externalLibs: IExternalLib[] = [
    {
      src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js',
      integrity: 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo',
      crossOrigin: 'anonymous'
    },
    {
      src: 'https://code.jquery.com/jquery-3.6.0.slim.min.js',
      integrity: 'sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=',
      crossOrigin: 'anonymous'
    }
  ];
  ngOnInit(): void {
    this.externalLibs.forEach(lib => ExternalLibrariesService.injectLib(lib.src, lib.integrity, lib.crossOrigin));
  }
}

Thank for reading, hope you like it 🙏🏽

Blog

Load external libraries dynamically in Angular

Alireza Razinejad

Ability to add other important attributes

Join Our Newsletter. No Spam, Only the good stuff.

Related