How to import webflow into Angular > 9

Solution 1:

I didn't test this solution
This is an answer to @RamiAssi, since his solution is going in the right direction, but wont make this usable in every case & also, the question was about lazy loading & not loading when loading my main application

If you would like to load scripts & not do as the accepted answer does, I would recommend doing as follow.

Load this in the ngOnInit()you wants, the isScriptLoaded will make sure you do not load multiple time the same script

Then, await from the script to being loaded before you load the webflow html

export class AnyComponent implements OnInit {
 loading = true

 ngOnInit(): void {
   if(this.loadScript('assets/theme/js/jquery-3.5.1.min.js') && this.loadScript('assets/theme/js/workflow.js')) 
    this.loading = false
  }

<ng-container *ngIf="!loading"> 
  <!-- My webflow stuff -->
</ng-container>

/**
 *
 * @param target url to be loaded
 * @returns true when loaded
 */
export const loadScript = (target: string): boolean => {
  if (!isScriptLoaded(target)) {
    const tag = document.createElement('script')
    tag.src = target
    document.body.appendChild(tag)
    return true
  }

  return true
}

export const isScriptLoaded = (target: string): boolean => {
  return document.querySelector('script[src="' + target + '"]') ? true : false
}

Point of optimization

You could make a method that load multiple scripts