Angular 6 с Fusionchart - модуль не найден: ошибка: не удается разрешить fusionmaps / maps / fusioncharts.world - PullRequest
Новая
       13

Angular 6 с Fusionchart - модуль не найден: ошибка: не удается разрешить fusionmaps / maps / fusioncharts.world

0 голосов
/ 15 января 2019

Я собираюсь создать первую интерактивную карту, используя FusionChart (FC).Из документации https://www.fusioncharts.com/dev/getting-started/angular/angular/your-first-map-using-angular я сделал все шаги.Тем не менее, во время ng serve я заметил ошибку:

Модуль не найден: Ошибка: невозможно разрешить 'fusionmaps / maps / fusioncharts.world' в '/ var / www / html / my-app / src / app '

. / src / app / app.module.ts Модуль не найден: Ошибка: не удается разрешить' fusionmaps / maps / fusioncharts.world 'в' / var / www / html/ my-app / src / app '

В консоли я вижу дополнительные ошибки, такие как:

GET http://localhost:5200/fusioncharts.world.js net :: ERR_ABORTED

Отказался от выполнения скрипта из 'http://localhost:5200/fusioncharts.world.js', поскольку его тип MIME (' text / html ') не исполняется и включена строгая проверка типов MIME.

Версия FusionChartЯ использую: enter image description here

в моем app.module.ts: 

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 { }

In app.component.ts: 

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 --> 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"
            }]
        }
    }
}

In.html file: 

  <fusioncharts
    width="800"
    height="550"
    type="world"
    [dataSource]="dataSource">
</fusioncharts>

вот содержимое package.json: 

{
  "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"
  }
}

1 Ответ

0 голосов
/ 16 января 2019

Ашок помог мне как мог, и он предоставил мне решение в моей электронной почте (как мы обсуждали в чате). Я реализовал то, что он дал мне по электронной почте, и это сработало хорошо. Теперь я сравнил свой код с кодом, который он мне предоставил. Я видел небольшие изменения. Смотрите ниже:

не работает 

import * as World from 'fusionmaps/maps/fusioncharts.world';

рабочий: 

import * as World from 'fusioncharts/maps/fusioncharts.world';

Я думаю, что на сайте fusioncharts документация неверна.

...