title: Angular 6 with Fusionchart - Module not found: Error: Can't resolve fusionmaps/maps/fusioncharts.world
body: <p>I am going to create first interactive map using FusionChart (FC). From the documentation <a href="https://www.fusioncharts.com/dev/getting-started/angular/angular/your-first-map-using-angular" rel="nofollow noreferrer">https://www.fusioncharts.com/dev/getting-started/angular/angular/your-first-map-using-angular</a> I done all the steps. However, during <code>ng serve</code> I noticed the error:</p>
  
  <blockquote>
    <p>Module not found: Error: Can't resolve 'fusionmaps/maps/fusioncharts.world' in '/var/www/html/my-app/src/app'</p>
    
    <p>./src/app/app.module.ts
    Module not found: Error: Can't resolve 'fusionmaps/maps/fusioncharts.world' in '/var/www/html/my-app/src/app'</p>
  </blockquote>
  
  <p>From console, I see the additional errors like:</p>
  
  <blockquote>
    <p>GET <a href="http://localhost:5200/fusioncharts.world.js" rel="nofollow noreferrer">http://localhost:5200/fusioncharts.world.js</a> net::ERR_ABORTED</p>
    
    <p>Refused to execute script from '<a href="http://localhost:5200/fusioncharts.world.js" rel="nofollow noreferrer">http://localhost:5200/fusioncharts.world.js</a>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.</p>
  </blockquote>
  
  <p>FusionChart version I'm using:
  <a href="https://i.stack.imgur.com/Z635T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z635T.png" alt="enter image description here"></a></p>
  
  <p>in my <code>app.module.ts</code>:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { AppComponent } from './app.component';
  import { FusionChartsModule } from 'angular-fusioncharts';
  import * as FusionCharts from 'fusioncharts';
  import * as FusionMaps from 'fusioncharts/fusioncharts.maps';
  import * as World from 'fusionmaps/maps/fusioncharts.world';
  
  import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
  // Pass the fusioncharts library and chart modules
  FusionChartsModule.fcRoot(FusionCharts, FusionMaps, World, FusionTheme);
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      //NgxPayPalModule,
      //Angular4PaystackModule,
      FusionChartsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>In <code>app.component.ts</code>:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'my-app';
    public payPalConfig?: PayPalConfig;
    dataSource: Object;
  
    constructor() {
          this.dataSource = {
              "chart": {
                  "caption": "Average Annual Population Growth",
                  "subcaption": " 1955-2015",
                  "numbersuffix": "%",
                  "includevalueinlabels": "1",
                  "labelsepchar": ": ",
                  "entityFillHoverColor": "#FFF9C4",
                  "theme": "fusion"
              },
              // Aesthetics; ranges synced with the slider
              "colorrange": {
                  "minvalue": "0",
                  "code": "#FFE0B2",
                  "gradient": "1",
                  "color": [{
                      "minvalue": "0.5",
                      "maxvalue": "1.0",
                      "color": "#FFD74D"
                  }, {
                      "minvalue": "1.0",
                      "maxvalue": "2.0",
                      "color": "#FB8C00"
                  }, {
                      "minvalue": "2.0",
                      "maxvalue": "3.0",
                      "color": "#E65100"
                  }]
              },
              // Source data as JSON --&gt; id represents countries of world.
              "data": [{
                  "id": "NA",
                  "value": ".82",
                  "showLabel": "1"
              }, {
                  "id": "SA",
                  "value": "2.04",
                  "showLabel": "1"
              }, {
                  "id": "AS",
                  "value": "1.78",
                  "showLabel": "1"
              }, {
                  "id": "EU",
                  "value": ".40",
                  "showLabel": "1"
              }, {
                  "id": "AF",
                  "value": "2.58",
                  "showLabel": "1"
              }, {
                  "id": "AU",
                  "value": "1.30",
                  "showLabel": "1"
              }]
          }
      }
  }
  </code></pre>
  
  <p>In <code>.html</code> file:</p>
  
  <pre><code>  &lt;fusioncharts
      width="800"
      height="550"
      type="world"
      [dataSource]="dataSource"&gt;
  &lt;/fusioncharts&gt;
  </code></pre>
  
  <p>here is the content of package.json:</p>
  
  <pre><code>{
    "name": "my-app",
    "version": "0.0.0",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^6.1.0",
      "@angular/common": "^6.1.0",
      "@angular/compiler": "^6.1.0",
      "@angular/core": "^6.1.0",
      "@angular/forms": "^6.1.0",
      "@angular/http": "^6.1.0",
      "@angular/platform-browser": "^6.1.0",
      "@angular/platform-browser-dynamic": "^6.1.0",
      "@angular/router": "^6.1.0",
      "angular-fusioncharts": "^3.0.0",
      "angular4-paystack": "^2.3.2",
      "core-js": "^2.6.2",
      "fusioncharts": "^3.13.3-sr.1",
      "ng2-password-strength-bar": "^1.2.3",
      "ngx-paypal": "^4.0.1",
      "rxjs": "~6.2.0",
      "zone.js": "^0.8.27"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "^0.8.9",
      "@angular/cli": "^6.2.9",
      "@angular/compiler-cli": "^6.1.0",
      "@angular/language-service": "^6.1.0",
      "@types/jasmine": "^2.8.14",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.3.0",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~3.0.0",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.1",
      "karma-jasmine": "~1.1.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "^5.4.2",
      "ts-node": "~7.0.0",
      "tslint": "~5.11.0",
      "typescript": "~2.9.2"
    }
  }
  </code></pre>