unable to import datamaps in angular app

[shahin4u000]

After installed with npm i datamaps I have modified my angular.json file like that:

scripts": [
              "node_modules/d3/d3.js",
              "node_modules/topojson/build/topojson.js",
              "node_modules/datamaps/dist/datamaps.world.min.js"
            ],

angular component I was using like that:

component.ts file
declare var Datamap: any; # outside the component, to say the typescript it is defined somewhere in the app

and then put my code in a lifecycle hook like that:

ngAfterContentInit(): void {
        var map = new Datamap({
          element: document.getElementById('test-container'),
          fills: {
              defaultFill: 'rgba(23,48,210,0.9)' // Any hex, color name or rgb/rgba value
          }
      });
    
        // var colors = d3.scale.category10();
      }

but unfortunately, It did not load anything. I am getting an error in the console that:
datamap is undefined.

Can someone please help me to fix that problem?

[zaryab91]

I also faced this problem after angular ^12 update. Seems like npm i datamaps that package is not compatible with the recent changes on angular. So i did a work around.

copy the necessary files in assets folder and add in angular.json
"scripts": [ "node_modules/jquery/dist/jquery.min.js", "src/assets/lib/datamaps/d3.min.js", "src/assets/lib/datamaps/topojson.js", "src/assets/lib/datamaps/datamaps.world.lores.js" ],

in your component or service where ever you are using it

declare var d3:any;
declare var Datamaps:any;

on top and you are good to go

[adrianbj]

I use this https://www.npmjs.com/package/angular-datamaps to use datamaps within Angular. Maybe that helps?