JS file load on Angular component onInit

Question

I'm having an error while loading a flipbook library, it says Cannot set properties of null (setting 'innerHTML') and the line that is making this error:
const loadingMessageElement = document.getElementById('loading-message');
loadingMessageElement.innerHTML = 'Preparing document...';
So I think this is because the file is loading before the DOM is ready, so how can I load the file when the DOM is ready?
To clarify a little, this library is not at node_modules, is in my assets folder and I call it in my angular.json in the scripts section, I already try to import and declare the library in my ts file but I always got the error Cannot find module 'flipbook' or its corresponding type declarations.

Answer 1

I make it work with this function in my TS file:

ngOnInit(): void { 
    this.loadScripts();
  }

  // Method to dynamically load JavaScript
  loadScripts() {
  
    // This array contains all the files/CDNs
    const dynamicScripts = [
       'assets/flipbook/flipbook.js'
    ];
    for (let i = 0; i < dynamicScripts.length; i++) {
      const node = document.createElement('script');
      node.src = dynamicScripts[i];
      node.type = 'text/javascript';
      node.async = false;
      document.getElementsByTagName('body')[0].appendChild(node);
    }
 }