Angular2 + ag-Grid 无法加载 ag-grid-ng2/main.js (404 Not Found)答案

【问题标题】：Angular2 + ag-Grid cannot load ag-grid-ng2/main.js (404 Not Found)Angular2 + ag-Grid 无法加载 ag-grid-ng2/main.js (404 Not Found)
【发布时间】：2016-09-21 14:46:11
【问题描述】：

我正在尝试将 ag-Grid 与 Angular2 集成，但遇到以下错误：

zone.js:101 获取http://localhost:4200/node_modules/ag-grid-ng2/main.js 404（未找到）

我正在使用以下方式导入第三方组件：

import {AgGridNg2} from 'ag-grid-ng2/main';
...
directives: [AgGridNg2]

这是我的 system-config.ts 文件：

"use strict";

// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  // ag libraries
  'ag-grid-ng2': 'node_modules/ag-grid-ng2',
  'ag-grid': 'node_modules/ag-grid',
  'ag-grid-enterprise' : 'node_modules/ag-grid-enterprise'
};

/** User packages configuration. */
const packages: any = {
  'ag-grid-ng2': {
    defaultExtension: "js"
  },
  'ag-grid': {
    defaultExtension: "js"
  },
  'ag-grid-enterprise': {
    defaultExtension: "js"
  }
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/full-width-renderer',
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

我可以在/node_modules/ag-grid-ng2文件夹下看到依赖：

非常感谢任何帮助。

【问题讨论】：

转译后有没有看到这个模块相关的JS？
您使用的是什么版本的 ag-grid-ng2？这与使用 ag-grid-ng2 的语法略有不同

标签： javascript angular systemjs ag-grid

【解决方案1】：

我没有使用过企业网格，但是要在 Angular 2 中使用 ag-grid，您需要将其包含在 System.config 的地图部分中：

'ag-grid': 'node_modules/ag-grid',
'ag-grid-ng2': 'node_modules/ag-grid-ng2'

还要确保你的 node_modules 包中有这些模块，否则请确保在你的 package.json 中包含这些描述并首先运行“npm install”。

【讨论】：