How to use json2csv in Angular2 ?

[NitinTiwari1010]

Hi, I want to use json2csv in my angular2 project, I have installed json2csv through npm but when i am trying to add import statement in my component, it is giving below error.. "node_modules/json2csv/index"' resolves to a non-module entity and cannot be imported using this construct."

My component code to import json2csv below.

import {json2csv} from 'json2csv';

Please help

[knownasilya]

To use it through npm as a module you'd have to use a bundler like browserify, webpack, etc.. Alternatively we have prepackaged a version that can be used with a script tag: https://github.com/zemirco/json2csv#include-using-a-script-tag-not-recommended

[NitinTiwari1010]

Thanks for quick response, I am using angular-cli for angular2 project. is there any way/workaround to import json2csv in my angular2 component.

[knownasilya]

I'd try ember-browserify addon e.g. ng install ember-browserify and then import json2csv from 'npm:json2csv';. Not sure if that addon will work with ng-cli, since not all ember addons do.

An alternative would be to app.import(pathtojson2csv) in the ng broccoli/build file. Not sure what it's called in ng-cli (maybe ng-cli.js?), but it's at the top directory.

[NitinTiwari1010]

ember option is not working, for second option, i added js in all the places in angular-cli but it is not importing anything from json2csv. getting same error.

[knownasilya]

Can you show me how you have it setup?

[NitinTiwari1010]

Thanks a lot for your help, i have added details about json2csv in multiple files like i am doing for other components: below are the details with file name:

1. angular-cli-build.js module.exports = function(defaults) { return new Angular2App(defaults, {

   vendorNpmFiles: [
    'systemjs/dist/system-polyfills.js',
    'systemjs/dist/system.src.js',
    'zone.js/dist/*.js',
    'es6-shim/es6-shim.js',
    'reflect-metadata/*.js',
    'rxjs/**/*.js',
    '@angular/**/*.js',
    'ng2-bootstrap/**/*.js',
    'bootstrap/dist/**/*',
    'bootstrap-sass/assets/**/*',
    'moment/moment.js',
    'angular2-modal/**/*.js',
    'ng2-dnd/**/*.js',
    'ng2-dnd/**/*.css',
    'ng2-easy-table/**/*.js',
    'ng2-easy-table/**/*.css',
    'ng2-datepicker/**/*.js',         
    'json2csv/**/*.js'
   
   ],
   sassCompiler: {
     // cacheExclude: [/\/_[^\/]+$/]
      includePaths: ['src/contents/scss']
   
   },

   }

2. system-config.ts

const barrels: string[] = [ // Angular specific barrels. '@angular/core', '@angular/common', '@angular/compiler', '@angular/http', '@angular/forms', '@angular/router', '@angular/platform-browser', '@angular/platform-browser-dynamic',

// Thirdparty barrels.
'rxjs',
'ng2-bootstrap',
'ng2-dnd',
'ng2-easy-table',
'ng2-datepicker',
'json2csv',
// App specific barrels.
'app',
'app/shared',
'app/merc-main',
'app/shared/merc-header',
'app/shared/merc-footer',
'app/common/header',
'app/common/footer',
'app/merc-main/add-store',
'app/common/addstore',
'app/common/tabs',
'app/common/storelist',

'app/common/header-route',
'app/dispatch/dispatch',
'app/dispatch',
'app/dispatch/dispatch-row',
'app/dispatch/route-info',
'app/dispatch/route-item',
'app/common/header-route-providers',
'app/common/route',
'app/reporting/storeservice',
/** @cli-barrel */

];

const cliSystemConfigPackages: any = {}; barrels.forEach((barrelName: string) => { if (barrelName == 'ng2-bootstrap') cliSystemConfigPackages[barrelName] = { main: 'ng2-bootstrap' }; else 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', 'ng2-bootstrap': 'vendor/ng2-bootstrap', 'moment': 'vendor/moment/moment.js', 'json2csv': 'vendor/json2csv/dist/json2csv.js', 'main': 'main.js' }, packages: cliSystemConfigPackages });

1. package.json

"dependencies": { "@angular/common": "2.0.0-rc.4", "@angular/compiler": "2.0.0-rc.4", "@angular/core": "2.0.0-rc.4", "@angular/forms": "0.2.0", "@angular/http": "2.0.0-rc.4", "@angular/platform-browser": "2.0.0-rc.4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", "@angular/router": "3.0.0-beta.2", "@angular/router-deprecated": "2.0.0-rc.2", "@angular/upgrade": "2.0.0-rc.4",
"angular2-modal": "^1.0.8", "bootstrap": "3.3.6", "bootstrap-sass": "3.3.6", "es6-shim": "^0.35.0", "json2csv": "^3.6.3", "ng2-bootstrap": "^1.0.20", "ng2-datepicker": "0.8.0", "ng2-dnd": "^1.10.0", "ng2-easy-table": "0.1.18", "ng2-table": "^1.0.2", "ng2-tree": "0.0.2-7", "reflect-metadata": "0.1.3", "rxjs": "5.0.0-beta.6", "systemjs": "0.19.26", "zone.js": "^0.6.12" },

1. index.html

   Loading...

[knownasilya]

Try json2csv/dist/*.js

[NitinTiwari1010]

Thanks for help.

i got the following error after this change:

1. when i write "import json2csv from 'json2csv' ;" in my component file, error below: Module '"c:/Merch/DPSG.Web.Merchandiser/src/WebApp/node_modules/json2csv/index"' has no default export
2. when i write "import json2csv from 'json2csv/dist/json2csv' ;" i got, cannot find module json2csv/dist/json2csv.

[knownasilya]

You cannot import it in your code, it's a global, e.g. json2csv. Make sure to add it to your .jshintrc file as well.

[NitinTiwari1010]

if it cannot add in my component then how i will use in my angular2 custom component?, is there any work around? I have used ng2-easy-table, ng2-datepicker but didn't face this issue.

Please advice.

[knownasilya]

You should just be able to use it in your components without any imports. Just do var csv = json2csv(...).

[vicheanak]

Has somebody found the solution to this yet? @knownasilya you can't use it as global json2csv, because it's not angular2 component. you can't just call it as global variable.

[knownasilya]

You can always use globals, just use window.json2csv.

[vicheanak]

When I did that, it gives me this error: src/app/report/report.component.ts|103 col 26 error| Property 'json2csv' does not exist on type 'Window'.

[vicheanak]

This is my console.

[knownasilya]

Ok, so it should just work, without window.

[vicheanak]

No, it only works on the console, when I use it in typescript, it gives this error: src/app/report/report.component.ts|182 col 14 error| Cannot find name 'json2csv'.

[knownasilya]

http://stackoverflow.com/a/13252853/483616

[vicheanak]

@knownasilya 👍 thanks, it's working good! By the way, for late comers, to have the json2csv to be available as the global variable, I've setup in the system-config.ts of angular-cli, included this src in the src/index.html <script src="vendor/json2csv/dist/json2csv.js"></script>

[udleinati]

import json2csv from 'json2csv/lib/json2csv';
const fields = ['field1', 'field2', 'field3'];
const data = { field1: 'a', field2: 'b', field3: 'c' };
console.log(json2csv({ data: data, fields: fields }));

[chriszrc]

import json2csv from 'json2csv/lib/json2csv';

That didn't work for me, I got:

json2csv_1.default is not a function

This did however:

import * as json2csv from 'json2csv';

[quantuminformation]

what is the import for json2csv

[chriszrc]

It looks like this situation has improved greatly with the latest version (4.2.1). Install that, add the @types package:

npm install --save-dev @types/json2csv

Then import as you'd expect:

import {json2csv,  Parser /* etc */} from 'json2csv';