Angular의 동적 스크립트 로딩: 솔루션

소개:

Angular 애플리케이션에서는 외부 스크립트를 포함해야 합니다. 발생할 수 있습니다. 그러나

동적 스크립트 로드:

동적으로 로드하려면 스크립트를 사용하려면 다음 단계를 수행할 수 있습니다.

1. 스크립트 저장소 만들기: 동적 로딩을 위한 스크립트 경로와 고유 이름을 보유하는 ScriptStore.
2. 스크립트 서비스 삽입: 스크립트 로딩을 관리하는 삽입 가능한 Angular 서비스로 ScriptService를 구현합니다.
3. 스크립트 로드 메서드: 스크립트를 동적으로 로드하려면 ScriptService에서 로드 메서드를 정의합니다. 이 메소드는 스크립트 이름을 매개변수로 사용하고 약속을 반환합니다.
4. 스크립트 로드 구현: 로드 메소드 내에서 스크립트가 이미 로드되었는지 확인합니다. 그렇지 않은 경우
5. 서비스 주입 및 호출: ScriptService를 스크립트를 로드해야 하는 구성 요소 또는 서비스. 로드 메소드를 호출하여 원하는 스크립트를 로드합니다.

예제 코드:

다음은 스크립트 저장소 및 서비스의 샘플 구현입니다.

interface Scripts {
  name: string;
  src: string;
}

// Script store with sample script definitions
export const ScriptStore: Scripts[] = [
  { name: 'filepicker', src: 'https://api.filestackapi.com/filestack.js' },
  { name: 'rangeSlider', src: '../../../assets/js/ion.rangeSlider.min.js' }
];

@Injectable()
export class ScriptService {
  private scripts: any = {};

  constructor() {
    ScriptStore.forEach((script: any) => {
      this.scripts[script.name] = {
        loaded: false,
        src: script.src
      };
    });
  }

  load(...scripts: string[]) {
    var promises: any[] = [];
    scripts.forEach((script) => promises.push(this.loadScript(script)));
    return Promise.all(promises);
  }

  loadScript(name: string) {
    return new Promise((resolve, reject) => {
      // Check if script is already loaded
      if (this.scripts[name].loaded) {
        resolve({ script: name, loaded: true, status: 'Already Loaded' });
      } else {
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = this.scripts[name].src;
        script.onload = () => {
          this.scripts[name].loaded = true;
          resolve({ script: name, loaded: true, status: 'Loaded' });
        };
        script.onerror = (error: any) => resolve({ script: name, loaded: false, status: 'Loaded' });
        document.getElementsByTagName('head')[0].appendChild(script);
      }
    });
  }
}

사용법:

스크립트를 동적으로 로드하려는 구성 요소나 서비스에 ScriptService를 삽입합니다. 그런 다음 메서드 내에서 다음과 같이 로드 메서드를 호출합니다.

this.script.load('filepicker', 'rangeSlider').then(data => {
  console.log('script loaded ', data);
}).catch(error => console.log(error));

이 예에서는 filepicker 및 rangeSlider 스크립트가 모두 동적으로 로드됩니다. 이제 필요에 따라 CDN 또는 로컬 폴더에서 스크립트를 로드하도록 ScriptStore를 구성할 수 있습니다.