How to import webflow into Angular > 9

Question

I tried to import a webflow generated single page into my angular app, which is going to be lazy loaded once visited in a subpage.

I've created a sub page, imported the html part of webflow in example-webflow.component.html and binded the css directly into the example-webflow.component.scss. I've tried to import the js in angular.json but didn't seems to work.

Does somebody already did such import?

I saw it was working with angular <= 6 with this library freeformjs but doesn't seems to work anymore

Answer 1

I could manage to make the webflow work in an Angular project by adding the webflow and jquery js files dynamically to the document head. After the app component view is initialized.

import { Component, AfterViewInit } from '@angular/core';

const dynamicScripts = [
  'assets/theme/js/jquery-3.5.1.min.js',
  'assets/theme/js/webflow.js',
  ];

@Component({
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {

  constructor() {
    
  }

  ngAfterViewInit(): void {
    this.loadScript();
  }

  public loadScript() {
    for (let i = 0; i < dynamicScripts.length; i++) {
      const node = document.createElement('script');
      node.src = dynamicScripts[i];
      node.type = 'text/javascript';
      node.async = false;
      node.charset = 'utf-8';
      document.getElementsByTagName('head')[0].appendChild(node);
    }
  }
}

Answer 2

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

Answer 3

I still didn't found any way of doing it so I've decided to :

1. Import the webflow export into my angular assets folder
2. Used the iframe to load the webflow component with src='/assets/webflow/index.html'