尝试使用ng2图表时出现404错误

我在尝试使ng2图表工作时遇到问题。我在GitHub上看过很多类似的帖子，但是目前为止还没有成功。错误是：尝试使用ng2图表时出现404错误

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:9823/ng2-charts 
    Error: XHR error (404 Not Found) loading http://localhost:9823/ng2-charts 
     at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:9823/lib/zone.js/dist/zone.js:698:29) 
     at ZoneDelegate.invokeTask (http://localhost:9823/lib/zone.js/dist/zone.js:265:35) 
     at Zone.runTask (http://localhost:9823/lib/zone.js/dist/zone.js:154:47) 
     at XMLHttpRequest.ZoneTask.invoke (http://localhost:9823/lib/zone.js/dist/zone.js:335:33) 
    Error loading http://localhost:9823/ng2-charts as "ng2-charts" from http://localhost:9823/lib/spa/app.module.js 
     at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:9823/lib/zone.js/dist/zone.js:698:29) 
     at ZoneDelegate.invokeTask (http://localhost:9823/lib/zone.js/dist/zone.js:265:35) 
     at Zone.runTask (http://localhost:9823/lib/zone.js/dist/zone.js:154:47) 
     at XMLHttpRequest.ZoneTask.invoke (http://localhost:9823/lib/zone.js/dist/zone.js:335:33) 
    Error loading http://localhost:9823/ng2-charts as "ng2-charts" from http://localhost:9823/lib/spa/app.module.js

我app.module.ts：

import {ChartsModule} from 'ng2-charts'; 
[...] 
@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     routing, 
     AccountModule, 
     ChartsModule 
    ] [...]

我systemjs.config.js

(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'lib/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'lib/spa', 
      // 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', 
      'ng2-charts': 'npm:ng2-charts', 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      'angular2-in-memory-web-api': { 
       main: './index.js', 
       defaultExtension: 'js' 
      }, 
      'ng2-charts': { 
       defaultExtension: 'js' 
      } 

     } 
    }); 
})(this);

我是很新的Angular2，所以我会非常感谢有关如何使图表工作的任何提示。当然，在开始的时候我的亭子安装chart.js之和NG2，图表和我在Index.cshtml文件中包含

<script src="~/lib/chart.js/dist/Chart.js"></script>

。

来源

2017-04-15 Ania

变化System.config.js如，

map: { 
'ng2-charts': 'npm:ng2-charts' 
} 

packages: { 
    main: 'ng2-charts.js', 
    defaultExtension: 'js' 
}

，然后导入它，

import { ChartsModule } from 'ng2-charts/ng2-charts';

来源

2017-04-15 11:14:53 Sajeetharan

不幸的是它没有工作。 “（SystemJS）XHR错误（404 Not Found）加载http：// localhost：9823/ng2-charts/ng2-charts”我改变了“packages”中的内容并导入，但仍然收到相同的错误。 – Ania

检查你的node_modules – Sajeetharan

里面我不确定我应该检查什么，但是我有chart.js和ng2-charts在那里。 – Ania

在下面的配置下的map添加'ng2-charts': 'npm:ng2-charts/bundles/ng2-charts.umd.min.js'线在你./src/ systemjs.config.js文件。我正在使用Angular 4.3.4与ng2-charts 1.6.0这对我来说非常合适。

/** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (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', 
     'ng2-charts': 'npm:ng2-charts/bundles/ng2-charts.umd.min.js' 
    }, 
    // 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' 
     } 
    } }); })(this);

来源

2017-08-22 03:53:56

尝试使用ng2图表时出现404错误

回答

相关问题