Angular에서 외부 스크립트를 동적으로 로드하는 방법은 무엇입니까?

Angular에서 외부 스크립트를 동적으로 로드

<를 명시적으로 추가하지 않고 외부 라이브러리를 Angular 애플리케이션에 원활하게 통합해야 하는 시나리오가 발생할 수 있습니다. ;스크립트> index.html 파일의 태그입니다. 이 기사에서는 Angular에서 외부 스크립트를 동적으로 로드하는 단계별 가이드를 자세히 살펴봄으로써 이러한 특정 요구 사항을 해결합니다.

Angular 서비스 사용

전용 서비스를 소개합니다. 스크립트 로딩을 효율적으로 처리하는 Angular 서비스입니다. 이 서비스인 ScriptService는 로드할 스크립트의 레지스트리를 관리합니다. 각 스크립트는 이름으로 식별되고 소스 경로(CDN 또는 로컬)가 함께 제공됩니다. 요청 시 서비스는 스크립트를 가져와 중복을 방지하기 위해 한 번만 로드되도록 합니다.

서비스 구현

ScriptService 구현에는 모든 외부 스크립트의 name-src 쌍을 저장하는 스크립트입니다. 각 스크립트에 대해 서비스는 중복 로드를 방지하기 위해 로드된 플래그를 유지합니다. 초기화 시 배열에 나열된 스크립트를 미리 로드합니다.

서비스의 load() 메소드는 로드할 스크립트 이름 배열을 허용합니다. 이름을 반복하면서 각각에 대해 loadScript() 메서드를 트리거합니다.

loadScript() 메서드는 로드된 플래그를 검사하여 스크립트가 이미 로드되었는지 확인합니다. 로드되면 Promise가 즉시 해결됩니다.

로드해야 하는 스크립트의 경우 loadScript()는 동적으로