获取 angular2-datatable 时出错

Question

我正在尝试将 Angular2-datatable 集成到我的 Angular2 应用程序中。

我正在使用 gulp。

我正在关注这个guide

查看并遵循指南，我运行第一个命令：

npm i -S angular2-datatable

然后我看到以下输出：

+-- UNMET PEER DEPENDENCY @angular/common@2.4.10
+-- UNMET PEER DEPENDENCY @angular/core@2.4.10
+-- UNMET PEER DEPENDENCY @angular/forms@2.4.10
+-- angular2-datatable@0.6.0
| `-- lodash@4.17.4
+-- UNMET PEER DEPENDENCY rxjs@5.0.0-beta.12
`-- UNMET PEER DEPENDENCY zone.js@0.6.26

然后我添加 DataTableModule 导入

import {DataTableModule} from "angular2-datatable";

@NgModule({
imports: [..., DataTableModule],

然后我尝试编译，我得到以下错误：

[INFO]  Loading app/main.js
[INFO]  Error: ENOENT: no such file or directory, open 'C:\DEV\my-proj\trunk\src\main\yo\tmp\angular2-datatable'
[INFO]     at Error (native)
[INFO] [10:26:52] 'build' errored after 7.22 s
[INFO] [10:26:52] Error in plugin 'run-sequence(bundle:app)'
[INFO] Message:
[INFO]     Error on fetch for angular2-datatable at file:///C:/DEV/my-proj/trunk/src/main/yo/tmp/angular2-datatable
[INFO]  Loading app/app.module.js
[INFO]  Loading app/main.js
[INFO]  ENOENT: no such file or directory, open 'C:\DEV\my-proj\trunk\src\main\yo\tmp\angular2-datatable'
[INFO] Details:
[INFO]     originalErr: Error: ENOENT: no such file or directory, open 'C:\DEV\my-proj\trunk\src\main\yo\tmp\angular2-datatable'
[INFO] Stack:
[INFO] Error on fetch for angular2-datatable at file:///C:/DEV/my-proj/trunk/src/main/yo/tmp/angular2-datatable
[INFO]  Loading app/app.module.js
[INFO]  Loading app/main.js
[INFO]  Error: ENOENT: no such file or directory, open 'C:\DEV\my-proj\trunk\src\main\yo\tmp\angular2-datatable'
[INFO]     at Error (native)

在here 观察到类似的问题，作者声称查看this 项目解决了他的问题。但是，我似乎无法指出他是如何做到的。

我尝试更新我的 gulpfile.js 以包含以下供应商部分：

vendors: [
    'node_modules/core-js/client/shim.js',
    'node_modules/zone.js/dist/zone.js',
    'node_modules/reflect-metadata/Reflect.js',
    'node_modules/systemjs/dist/system.src.js',
    'node_modules/angular2-datatable/index.js'
],

但是，这并没有解决问题。错误仍然存​​在。 我还尝试通过添加 angular2-datatable 条目来更新我的 systemjs.config.js 文件：

var map = {
    'app': 'app',
    '@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',
    'angular2-datatable': 'npm:@angular2-datatable/index.js',
    'rxjs': 'npm:rxjs'
};

正如猜测的那样，这也没有解决问题。我必须做些什么才能使本教程成功并能够使用 angular2-datatable？

Answer 1

我终于设法解决了这个问题，我做到了如下：

在我的 package.json 中，我必须确保包含以下依赖项：

"dependencies": {
    "angular2-datatable": "^0.6.0",
    "lodash":"^4.17.4",
     ...
}

在我的 systemjs.config.js 中，我必须为地图值添加以下内容：

var map = {
    'lodash': 'npm:lodash/lodash.js',
    'angular2-datatable':'npm:angular2-datatable',
    ...
};

我还必须将包设置为包含以下内容：

var packages = {
    app: {
        main: './main.js',
        defaultExtension: 'js'
    },
    rxjs: {
        main: '/bundles/Rx.js',
        defaultExtension: 'js'
    },
    'lodash': {
        defaultExtension: 'js'
    },
    'angular2-datatable': {
        main: './index.js',
        defaultExtension: 'js'
    }
};