时间戳

首页 > 解决方案 > 404 错误（SystemJS）XHR 错误加载为未找到融合图表

angular - 404 错误（SystemJS）XHR 错误加载为未找到融合图表

问题描述

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

错误是“ 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 { }

我的 system.config.js 文件我还包含了我的 system.config.js 文件我也在其中使用了融合图表，但我仍然收到该错误

   (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);

标签： angularbootstrap-4fusioncharts

解决方案

如果您使用 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 版本，我找到了这个 plunker，您可以在那里看到 systemjs + fusioncharts for angular2，如果您也使用 angular2-fusionchart 它应该是相同的，否则调整名称和路径。

普朗克

希望这可以帮助 ：）

推荐阅读