Comment puis-je intégrer des scripts au composant Angular 4?

Question

Je suis la documentation suivante sur les services Google Map Api (https://developers.google.com/maps/documentation/javascript/marker-clustering) .Je souhaite utiliser des clusters show map dans le composant d'application, mais le composant Angular ne prend pas en charge l'importation de scripts externes. Même si j'importe des scripts, je suis incapable de changer le contenu des scripts (par exemple, changer les emplacements var.). Alors, comment puis-je importer et maintenir ces scripts dans le fichier component.ts. Lorsque vous copiez les scripts directement dans component.ts, les erreurs se produisent, les variables ne sont pas déclarées car elles sont déclarées dans un fichier de script externe. S'il vous plaît ne me recommande pas agm cartes angulaires car il ne prend pas en charge les grappes de cartes. S'il vous plaît aidez-moi à résoudre ce problème.

<script> 

     function initMap() { 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 3, 
      center: {lat: -28.024, lng: 140.887} 
     }); 

     // Create an array of alphabetical characters used to label the markers. 
     var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 

     // Add some markers to the map. 
     // Note: The code uses the JavaScript Array.prototype.map() method to 
     // create an array of markers based on a given "locations" array. 
     // The map() method here has nothing to do with the Google Maps API. 
     var markers = locations.map(function(location, i) { 
      return new google.maps.Marker({ 
      position: location, 
      label: labels[i % labels.length] 
      }); 
     }); 

     // Add a marker clusterer to manage the markers. 
     var markerCluster = new MarkerClusterer(map, markers, 
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
     } 
     var locations = [ 
     {lat: -31.563910, lng: 147.154312}, 
     {lat: -33.718234, lng: 150.363181}, 
     {lat: -33.727111, lng: 150.371124}, 
     {lat: -33.848588, lng: 151.209834}, 
     {lat: -33.851702, lng: 151.216968}, 
     {lat: -34.671264, lng: 150.863657}, 
     {lat: -35.304724, lng: 148.662905}, 
     {lat: -36.817685, lng: 175.699196}, 
     {lat: -36.828611, lng: 175.790222}, 
     {lat: -37.750000, lng: 145.116667}, 
     {lat: -37.759859, lng: 145.128708}, 
     {lat: -37.765015, lng: 145.133858}, 
     {lat: -37.770104, lng: 145.143299}, 
     {lat: -37.773700, lng: 145.145187}, 
     {lat: -37.774785, lng: 145.137978}, 
     {lat: -37.819616, lng: 144.968119}, 
     {lat: -38.330766, lng: 144.695692}, 
     {lat: -39.927193, lng: 175.053218}, 
     {lat: -41.330162, lng: 174.865694}, 
     {lat: -42.734358, lng: 147.439506}, 
     {lat: -42.734358, lng: 147.501315}, 
     {lat: -42.735258, lng: 147.438000}, 
     {lat: -43.999792, lng: 170.463352} 
     ] 
    </script> 
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
    </script> 

Answer 1

Résolu ceci en suivant le tutoriel. Le problème était que nous devrions déclarer des variables afin d'utiliser un script externe. https://www.thepolyglotdeveloper.com/2016/01/include-external-javascript-libraries-in-an-angular-2-typescript-project/ Ou nous pouvons également utiliser des typages pour installer des fichiers de définition de tapuscrit qui peuvent être pris de https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types

Answer 2

Les supports angulaires d'importation de scripts externes ont un aperçu de ce fil de discussion. Load external js script dynamically in Angular 2