Angular 尝试使用ng2图表时出现404错误
我有一个问题时,试图使ng2图表的工作。我在GitHub和这里读过很多类似的帖子,但到目前为止都没有成功。 错误是:Angular 尝试使用ng2图表时出现404错误,angular,ng2-charts,Angular,Ng2 Charts,我有一个问题时,试图使ng2图表的工作。我在GitHub和这里读过很多类似的帖子,但到目前为止都没有成功。 错误是: 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.wr
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
] [...]
mysystemjs.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很陌生,所以如果有任何关于如何制作图表的建议,我将不胜感激。
当然,一开始我安装了bower和我的chart.js和ng2 charts
<script src="~/lib/chart.js/dist/Chart.js"></script>
在我的Index.cshtml文件中。将System.config.js更改为
map: {
'ng2-charts': 'npm:ng2-charts'
}
packages: {
main: 'ng2-charts.js',
defaultExtension: 'js'
}
然后作为
import { ChartsModule } from 'ng2-charts/ng2-charts';
在/src/systemjs.config.js文件的
映射下添加'ng2-charts':'npm:ng2 charts/bundles/ng2 charts.umd.min.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);
不幸的是,它不起作用。我在“packages”和导入中更改了内容,但仍然收到相同的错误“(SystemJS)XHR错误(404未找到)加载“检查节点模块内部我不确定应该检查什么,但我有chart.js和ng2图表。打开节点模块文件夹并检查