Open meiringdewet opened 7 years ago
+1
Getting same error, when trying to run jasmine tests on component with datatable in the template. But page works great, just testing breaks
I'm with @oaverkov -- the module works fine for me in components, but I can't get it working with Jasmine and Karma.
@meiringdewet you need to import DataTableModule
to module in which your component is declared. Maybe you can try to import DataTableModule
to some module imported by routing.
For problem with Jasmine @oaverkov opened issue #52
I get the same error, if I place the [mfData] on a div element instead of a table element. Is it possible to also allow div elements?
Example: `<div [mfData]="data" #mf="mfDataTable" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder"> <div *ngFor="let item of mf.data">
</div>
</div>`
@robguijt I'll change selector of Datatable in next release, so it can be declared on any tag
Hi, I am new to angular and just setup my new angular2 application. I just setup angular2-datatable to my component and doesn't seems to be working. Not sure whats wrong here. Any help is really appreciated as i m really stuck and not able to proceed further.
When i load the page, its throwing error at table<> tag (See below). I was not able to load the table itself. i checked similar issue posts and most of them were able to load the page, but failing in tests.
Am i missing anything here?
**My simple table :
<table class="table table-hover table-striped" *ngIf="pay && pay.length"
[mfData]="pay" #mf="mfDataTable">
<thead>
<tr>
<th>
<mfDefaultSorter by="id">Id</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let revision of mf.data">
<td>
{{revision.Id}}
</td>
</tr>
</tbody>
</table>**
My systemjs.config.js
// other libraries 'angular2-datatable': 'npm:angular2-datatable', 'lodash': 'npm:lodash/lodash.js'
package.json
"angular2-datatable": "^0.6.0", "lodash": "^4.17.2",
app.module.ts (Just showing datatable module here) ` import { DataTableModule } from "angular2-datatable";
@NgModule({
imports: [
DataTableModule, `
tsconfig.json
"paths": { "angular2-datatable": [ "../../.." ], "angular2-datatable/*": [ "../../../*" ]
Error Unhandled Promise rejection: Template parse errors: *There is no directive with "exportAs" set to "mfDataTable" ("triped" ngIf="payments && payments.length" [mfData]="payments" [ERROR ->]#mf="mfDataTable">**
"): PaymentListComponent@13:55 Can't bind to 'mfData' since it isn't a known property of 'table'. (" table-hover table-striped" *ngIf="payments && payments.length" [ERROR ->][mfData]="payments" #mf="mfDataTable">
"): PaymentListComponent@13:35 'mfDefaultSorter' is not a known element: If 'mfDefaultSorter' is an Angular component, then verify that it is part of this module. If 'mfDefaultSorter' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]Id "): PaymentListComponent@17:44 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors: There is no directive with "exportAs" set to "mfDataTable" ("triped" *ngIf="payments && payments.length" [mfData]="payments" [ERROR ->]#mf="mfDataTable">
"): PaymentListComponent@13:55 Can't bind to 'mfData' since it isn't a known property of 'table'. (" table-hover table-striped" *ngIf="payments && payments.length" [ERROR ->][mfData]="payments" #mf="mfDataTable">
"): PaymentListComponent@13:35 'mfDefaultSorter' is not a known element: If 'mfDefaultSorter' is an Angular component, then verify that it is part of this module. If 'mfDefaultSorter' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]Id "): PaymentListComponent@17:44
I was able to fix this issue after importing "DataTableModule" in my module where i was importing the routing.
same here by importing datatablemodule i was able to perform binding thanks guys
Same problem here, cant even get page to load when this error occurs. What file do I need to add import { DataTablesModule } from "angular-datatables"; to? I tried to add it to the component that houses the table and same error. I already have it in app modules as an angular import as instructed in the docs. Pls help!
Hi dwasyluk,
Here is what i have in my code.
app.module.ts: import { DataTableModule } from "angular2-datatable";
mymodule.ts (This is my custom module) import { DataTableModule } from "angular2-datatable";
If you do have any other modules other than app.module, ensure you are importing DataTableModule. The error messages are vague and even i was not able to fix at first shot. Try this way and let us know if you still see the issue.
Here is my systemjs.config.js for your reference, make sure you also have loadash imported.
/**
Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app',
'systemjs-json-plugin': 'npm:systemjs-plugin-json',
// angular bundles
'@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',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
// other libraries
'angular2-datatable': 'npm:angular2-datatable',
'lodash': 'npm:lodash/lodash.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, 'angular2-datatable': { main: 'index.js', defaultExtension: 'js' } } }); })(this);
Thanks @kvbhavsar7, after adding DataTableModule in parent as well as child modules, the issue is resolved.
This kind of error occurs because element not find dependent module. Make sure you have imported depended module in the app.module.ts or relevant module.ts file.
Hi,
I'm trying to add a simple data table to the standard CoreUI template (https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template) but I'm unable to initisalise a simple datatable, this is the console error:
My app.module.ts:
And the component HTML:
The only difference that I could find between the example in the repository and my code is that CoreUI uses a routing module to initialise components where the table in the example is in the AppModule itself. I'm not sure if the DataTableModule is included correctly in my Component.
CoreUI uses Angular2 2.1.1 with angular2-datatable 0.5.1
angular-cli.json: