Angular 2 error has no exported member

Question

I am new to Angular 2 and have got the valor software basic demo table working but have a few points I want help with.

1) When I run ngserve for the project I get: A number of same error as shown below for "has no exported member 'Renderer2'." [default] C:\\wamp\\www\\nationalgrid\\public_cli\\node_modules@ng-bootstrap\\ng-bootstrap\\buttons\\radio.d.ts:1:10 Module '"C:/wamp/www/nationalgrid/public_cli/node_modules//index"' has no exported member 'Renderer2'.

I do not want to use render 2 as that is angular 4 and this clients system has to be on angular 2 for the time being. What have I imported or done to be getting this error?

Package.json

{
"name": "a2-cli-app",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint "src/**/*.ts"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"": "^2.2.1",
"": "^2.2.1",
"": "^2.2.1",
"": "^2.2.1",
"": "^2.2.1",
"": "^2.2.1",
"": "^2.2.1",
"": "^3.2.1",
"angular2-cookie": "^1.2.5",
"bootstrap": "^3.3.7",
"chart.js": "^2.4.0",
"core-js": "^2.4.1",
"ng2-bs3-modal": "^0.10.4",
"ng2-charts": "1.4.1",
"ng2-file-upload": "1.1.4-2",
"ng2-pagination": "1.0.1",
"ng2-toastr": "1.3.2",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"": "^2.2.1",
"": "2.5.38",
"": "^6.0.42",
"angular-cli": "1.0.0-beta.21",
"codelyzer": "~1.0.0-beta.3",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "~2.0.3",
"webdriver-manager": "10.2.5",
"webpack": "^3.4.1"
}
}

If you need more details to help on this just let me know what you need.

2) In relation to the filtering on your valor simple data table how can I set the filtering to be case in-sensative, someone suggested a regular expression but I cannot see how that would be applied to the filter?

3) I can see in the data table example they get the data from the table-data.ts as Array I have my data coming into this project from a mysql database base as an Array, but how do I assign it to the data variable.

As they have private data:Array = TableData;, but if I try and change the "TableData" to anything else the code just give me errors and does not load, even once I have update the columns Array definition to match my incoming data.

4) Finally to make my file clearer, is it possible to move the columns array into a new file and reference it as my columns array is much larger than theirs?

Their columns array

columns:Array = [
{title: 'Name', name: 'name'},
{title: 'Position', name: 'position', sort: ''},
{title: 'Office', className: ['office-header', 'text-success'], name:    'office', sort: 'asc'},
{title: 'Extn.', name: 'ext', sort: ''},
{title: 'Start date', className: 'text-warning', name: 'startDate'},
{title: 'Salary ($)', name: 'salary'},
];

Thanks in advance

Answer 1

lets split the answer.

1) Those errors are related to ng-bootstrap which is a different package than ngx-bootstrap (the one developed by valor- software). In ng-bootstrap, the version beta 25 release states that it requires angular 4.0.3. So using and older version will fix your problem.

2) About the filtering can't you convert both string to lowercase as stated in https://github.com/valor-software/ng2-table/issues/152 ?

3) What kind of errors are you receiving? Are you using an http call for getting the data? Are you assigning the data to the result of the param instead of the observable?

4) Sure you can, create a file: 'columns.ts'

export let columns: Array<any> = [
{title: 'Name', name: 'name'},
{title: 'Position', name: 'position', sort: ''},
{title: 'Office', className: ['office-header', 'text-success'], name:    'office', sort: 'asc'},
{title: 'Extn.', name: 'ext', sort: ''},
{title: 'Start date', className: 'text-warning', name: 'startDate'},
{title: 'Salary ($)', name: 'salary'},
];

Then you can import it where you need to use it.

import { colums } from 'columns.ts';

Answer 2

Solved Point 4:

I created a file called MyColumns.ts as shown below:

export const MyColumns:Array<any> = 
[ 
{title: 'Name', name: 'name'}, 
{title: 'Position', name: 'position', sort: ''},
... 
{title: 'Salary ($)', name: 'salary'},
 ]; 

Then in my TableDemo.component.ts file where I originally had the all list I now have at the top:

import { MyColumns } from './mycolumns'; 

and then where I had the columns definitions before I have:

columns = MyColumnsDef; 

Hope this helps others on this point.