:60688/nodelib/ag-grid-angular/main Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:58 Error: (SystemJS) XHR error (404 Not Found) loading http:
Error: XHR error (404 Not Found) loading http:
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http:
at ZoneDelegate.invokeTask (http:
at Zone.runTask (http:
at XMLHttpRequest.ZoneTask.invoke (http:
Error loading http:
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http:
at ZoneDelegate.invokeTask (http:
at Zone.runTask (http:
at XMLHttpRequest.ZoneTask.invoke (http:
Error loading http:
(anonymous) @ localhost/:58
Below is my all configuration:
1) main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
2)app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AgGridModule } from "ag-grid-angular/main";
import { AppComponent } from "./app.component";
@NgModule({
imports: [
BrowserModule,
AgGridModule.withComponents([]
)
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
3)app.component.ts
import { Component } from "@angular/core";
import { GridOptions } from "ag-grid/main";
@Component({
selector: 'my-app',
templateUrl: 'app.component.html'
})
export class AppComponent {
private gridOptions: GridOptions;
public rowData: any[];
private columnDefs: any[];
constructor() {
this.gridOptions = <GridOptions>{
onGridReady: () => {
this.gridOptions.api.sizeColumnsToFit();
}
};
this.columnDefs = [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" }
];
this.rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 }
];
}
}
4) systemjs.config.js
(function (global) {
System.config({
paths: {
'npm:': '../../nodelib/'
},
map: {
app: '../../app',
'ag-grid-angular': 'npm:ag-grid-angular',
'ag-grid': 'npm:ag-grid',
'ag-grid-enterprise': 'npm:ag-grid-enterprise',
'@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',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'rxjs': 'npm:rxjs'
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
lib: {
format: 'register',
defaultExtension: 'js'
},
'ag-grid-angular': {
defaultExtension: "js"
},
'ag-grid': {
defaultExtension: "js"
},
'ag-grid-enterprise': {
defaultExtension: "js"
}
}
});
})(this);
5) Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Angular2WithVS2015</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Angular2WithVS2015</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2016 - Angular2WithVS2015</p>
</footer>
</div>
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/NodeLib/core-js/client/shim.min.js"></script>
<script src="~/NodeLib/zone.js/dist/zone.js"></script>
<script src="~/NodeLib/systemjs/dist/system.src.js"></script>
<script src="~/systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<link href="~/NodeLib/ag-grid/dist/styles/ag-grid.css" rel="stylesheet" />
<link href="~/NodeLib/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet" />
@*<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
lib: {
format: 'register',
defaultExtension: 'js'
},
'ag-grid-ng2': {
defaultExtension: "js"
},
'ag-grid': {
defaultExtension: "js"
}
},
map: {
'ag-grid-ng2': 'node_modules/ag-grid-ng2',
'ag-grid': 'node_modules/ag-grid'
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>*@
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("scripts", required: false)
</body>
</html>
6) Index.cshtml
@{
ViewData["Title"] = "Home Page";
}
Angula2 App
<my-app>loading...
@*<my-datatable>Loading...*@
What I have tried:
I checked that file exist in below path:
The code in that file is:
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
__export(require("./dist/aggrid.module"));
__export(require("./dist/agGridColumn"));
__export(require("./dist/agGridNg2"));
__export(require("./dist/baseComponentFactory"));
__export(require("./dist/ng2ComponentFactory"));
__export(require("./dist/ng2FrameworkFactory"));
I am not understand what is going wrong with this?