404 错误 (SystemJS) XHR 加载错误，因为未找到融合图表

Question

error 嗨，我正在使用 .net + angular 4 每当我尝试导入新模块时，例如现在我正在导入 FusionChartModule 我得到以下信息我需要在 system.config.js 文件中添加任何内容吗？

The error is "https://i.stack.imgur.com/XZgco.png"

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from "@angular/router";
import { HttpModule } from '@angular/http';
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';
import { FusionChartsModule } from 'angular4-fusioncharts';
import { AppComponent } from './app.component';

FusionChartsModule.fcRoot(FusionCharts, Charts, FintTheme);
@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    FusionChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

my system.config.js file I had also included my system.config.js file I had also used fusion charts inside this but still I am getting that error

   (function (global) {
     System.config({
     paths: {
     // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
     // our app is within the app folder
    'app': 'app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',

  'fusioncharts': 'npm:fusioncharts/',
  'angular4-fusioncharts': 'npm:angular4-fusioncharts/dist/'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    defaultExtension: 'js',
    meta: {
      './*.js': {
        loader: 'systemjs-angular-loader.js'
      }
    }
  },
  rxjs: {
    defaultExtension: 'js'
  },
  fusioncharts: {
      main: './fusioncharts.js',
      defaultExtension: 'js'
  },
  'angular4-fusioncharts': {
      main: './index.js',
      defaultExtension: 'js'
  }
 }
 });
})(this);

Answer 1

如果您使用的是 systemjs，则必须将 FusionCharts 添加到项目目录中的 config.js 文件中

map: {
...

'fusioncharts': 'npm:fusioncharts/',
'angular2-fusioncharts': 'npm:angular2-fusioncharts/dist/'

},
 //packages defines our app package
 packages: {
 ...
fusioncharts: {
  main: './fusioncharts.js',
  defaultExtension: 'js'
},
'angular2-fusioncharts': {
  main: './index.js',
  defaultExtension: 'js'
}

如果你使用不同的版本，你当然需要调整 angular2-fusioncharts 版本，我找到了这个插件，你可以在那里看到 systemjs + fusioncharts for angular2，如果你也使用 angular2-fusionchart 它应该是一样的，否则调整名称和路径。

Plunker

希望这对您有所帮助:)

404 错误 (SystemJS) XHR 加载错误，因为未找到融合图表

404 error (SystemJS) XHR error loading as fusion charts not found

fusioncharts

bootstrap-4

angular