pramod_er123 Ответов: 0

Я пытаюсь использовать ag-grid для angular -2 С visual studio, я получаю ошибку, которая упоминается в описании.

: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://localhost:60688/nodelib/ag-grid-angular/main
	Error: XHR error (404 Not Found) loading http://localhost:60688/nodelib/ag-grid-angular/main
	    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:60688/NodeLib/zone.js/dist/zone.js:698:29)
	    at ZoneDelegate.invokeTask (http://localhost:60688/NodeLib/zone.js/dist/zone.js:265:35)
	    at Zone.runTask (http://localhost:60688/NodeLib/zone.js/dist/zone.js:154:47)
	    at XMLHttpRequest.ZoneTask.invoke (http://localhost:60688/NodeLib/zone.js/dist/zone.js:335:33)
	Error loading http://localhost:60688/nodelib/ag-grid-angular/main as "ag-grid-angular/main" from http://localhost:60688/app/app.module.js
	    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:60688/NodeLib/zone.js/dist/zone.js:698:29)
	    at ZoneDelegate.invokeTask (http://localhost:60688/NodeLib/zone.js/dist/zone.js:265:35)
	    at Zone.runTask (http://localhost:60688/NodeLib/zone.js/dist/zone.js:154:47)
	    at XMLHttpRequest.ZoneTask.invoke (http://localhost:60688/NodeLib/zone.js/dist/zone.js:335:33)
	Error loading http://localhost:60688/nodelib/ag-grid-angular/main as "ag-grid-angular/main" from http://localhost:60688/app/app.module.js
(anonymous) @ localhost/:58



Ниже приведена моя вся конфигурация:
1) main. ts

/// <reference path="../../typings/globals/node/index.d.ts" />
/// <reference path="../../typings/globals/core-js/index.d.ts" />
// main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);



2)приложение.модуль.ТС

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
// ag-grid
import { AgGridModule } from "ag-grid-angular/main";
// application
import { AppComponent } from "./app.component";

@NgModule({
    imports: [
        BrowserModule,
        AgGridModule.withComponents([]
        )
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}



3)приложение.компонент.ТС

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() {
        // we pass an empty gridOptions in, so we can grab the api out
        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

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': '../../nodelib/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: '../../app',
            // angular bundles
            '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',
            
            // other libraries
            'rxjs': 'npm:rxjs'
        },
        // 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'
            },
            lib: {
                format: 'register',
                defaultExtension: 'js'
            },
            'ag-grid-angular': {
                //main: 'main.js',
                defaultExtension: "js"
            },
            'ag-grid': {
                //main: 'main.js',
                defaultExtension: "js"
            },
            'ag-grid-enterprise': {
                //main: 'main.js',
                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).cshtml по

@{
ViewData ["Title"] = " Домашняя Страница";
}

Приложение Angula2



<my-app & gt;загрузка...

@*<my-datatable & gt;загрузка...*@

Что я уже пробовал:

Я проверил, что файл существует в приведенном ниже пути:


Код в этот файл:

"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"));
//# sourceMappingURL=main.js.map



Я не понимаю, что в этом плохого?

gabbar12_123

я сталкиваюсь с той же проблемой

0 Ответов