如何使用 gulpfile.js 导入primeng组件？答案

【问题标题】：how to import primeng components using gulpfile.js?如何使用 gulpfile.js 导入primeng组件？
【发布时间】：2016-11-14 01:38:31
【问题描述】：

我无法使用 gulpfile.js 导入primeng 组件，但我可以导入其他第三方组件。

我收到未知来源错误。请帮忙。

是否必须更改primeng.js中的路径？

布局.cshtml：

   <script src="js/primeui-ng-all.js"></script>
 <script>
    System.config({
        packages: {
            'app': {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        map: {
            "angular2-jwt": "lib/angular2-jwt.js",
            "primeng": "lib/primeng.js"
        }
    });
    System.import('app/boot').then(null, console.error.bind(console));
</script>

GULPFILE.JS

gulp.task('copy:libs', ['clean'], function () {
   return gulp.src([
    'node_modules/es6-shim/es6-shim.min.js',
    'node_modules/systemjs/dist/system-polyfills.js',
    'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
    'node_modules/angular2/bundles/angular2-polyfills.js',
    'node_modules/systemjs/dist/system.src.js',
    'node_modules/rxjs/bundles/Rx.js',
    'node_modules/angular2/bundles/angular2.dev.js',
    'node_modules/angular2/bundles/router.dev.js',
    'node_modules/angular2/bundles/http.dev.js',
    'node_modules/angular2-jwt/angular2-jwt.js',
    'node_modules/angular2-jwt/angular2-jwt.js.map',
    'node_modules/primeng/primeng.js',
    'node_modules/primeng/primeng.js.map',
])
.pipe(gulp.dest(paths.libJsDest))
 });

组件：

import {DataTable, Column} from 'primeng/primeng';

我已导入数据表、列并添加到指令中并在组件中使用，如下所示

   <div class="row">
                    <p-dataTable [value]="projects">
                        <p-column field="name" header="name"></p-column>
                        <p-column field="projectState" header="projectState"></p-column>
                    </p-dataTable>
   </div>

但我收到以下错误：

 Syntax error
  Evaluating http://localhost:2595/lib/primeng.js/primeng
  Error loading http://localhost:2595/app/boot.js

【问题讨论】：

你能告诉我们更多的代码吗？如何导入组件？什么是 ngprime。我找不到它。你能提供一个链接吗？
PrimeNG 是primefaces.org/primeng
我添加了Primeng，现在可以正常使用了。但我无法向 p-datatable 或 p-column 添加任何类！为什么会这样？ @CagatayCivici
任何类是什么意思？风格课？你能发布你的代码吗？

标签： angular primeng

【解决方案1】：

您必须将地图更改为：地图： { 'primeng'：'lib/primeng' }

您必须更改 gulp 任务以导出所有组件。

我正在努力更改此配置以仅导入您需要的组件。

【讨论】：