how to import primeng components using gulpfile.js?

I’m not able to import primeng components using gulpfile.js but where as I can import other third party components.

I get Unknown source error. Please help.

Do I have to change the path in primeng.js ?

Layout.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))
 });

component:

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

I have imported datatable, column and added to the directive and used in the componenen as below

   <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>

But I get the below error :

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

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

you must change the map to :
map: {
‘primeng’: ‘lib/primeng’
}

and you must to change the gulp task to export all component.

I’m working to change this configuration to import only the components that you need.