Initialisation error - There is no directive with "exportAs" set to "mfDataTable"

meiringdewet commented 7 years ago

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:

There is no directive with "exportAs" set to "mfDataTable" (""animated fadeIn">
    <div class="row">
        <table class="table table-striped" [mfData]="data" [ERROR ->]#mf="mfDataTable" [mfRowsOnPage]="10">
            <thead>
            <tr>
"): ShiftsComponent@2:59
Can't bind to 'mfData' since it isn't a known property of 'table'. ("<div class="animated fadeIn">
    <div class="row">
        <table class="table table-striped" [ERROR ->][mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10">
            <thead>
            <tr>
"): ShiftsComponent@2:43
Can't bind to 'mfRowsOnPage' since it isn't a known property of 'table'. ("
    <div class="row">
        <table class="table table-striped" [mfData]="data" #mf="mfDataTable" [ERROR ->][mfRowsOnPage]="10">
            <thead>
            <tr>

My app.module.ts:

import {NgModule}                     from '@angular/core';
import {DataTableModule} from "angular2-datatable";
import {BrowserModule}                from '@angular/platform-browser';
import {
    LocationStrategy,
    HashLocationStrategy
}         from '@angular/common';

import {AppComponent}                 from './app.component';
import {Ng2BootstrapModule}           from 'ng2-bootstrap/ng2-bootstrap';
import {NAV_DROPDOWN_DIRECTIVES}      from './shared/nav-dropdown.directive';

import {ChartsModule}                 from 'ng2-charts/ng2-charts';
import {SIDEBAR_TOGGLE_DIRECTIVES}    from './shared/sidebar.directive';
import {AsideToggleDirective}         from './shared/aside.directive';
import {BreadcrumbsComponent}         from './shared/breadcrumb.component';
import {HttpModule} from '@angular/http';

import {AppRoutingModule}             from './app.routing';

//Layouts
import {FullLayoutComponent}          from './layouts/full-layout.component';
import {SimpleLayoutComponent}        from './layouts/simple-layout.component';
import {FormsModule} from "@angular/forms";

@NgModule({
    imports: [
        DataTableModule,
        BrowserModule,
        AppRoutingModule,
        Ng2BootstrapModule,
        FormsModule,

        ChartsModule,
        HttpModule
    ],
    declarations: [
        AppComponent,
        FullLayoutComponent,
        SimpleLayoutComponent,
        NAV_DROPDOWN_DIRECTIVES,
        BreadcrumbsComponent,
        SIDEBAR_TOGGLE_DIRECTIVES,
        AsideToggleDirective
    ],
    providers: [{
        provide: LocationStrategy,
        useClass: HashLocationStrategy
    }],
    bootstrap: [AppComponent]
})
export class AppModule {
}

And the component HTML:

<div class="animated fadeIn">
    <div class="row">
        <table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10">
            <thead>
            <tr>
                <th style="width: 20%">
                    <mfDefaultSorter by="name">Name</mfDefaultSorter>
                </th>
                <th style="width: 50%">
                    <mfDefaultSorter by="email">Email</mfDefaultSorter>
                </th>
                <th style="width: 10%">
                    <mfDefaultSorter by="age">Age</mfDefaultSorter>
                </th>
                <th style="width: 20%">
                    <mfDefaultSorter by="city">City</mfDefaultSorter>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of mf.data">
                <td>{{item.name}}</td>
                <td>{{item.email}}</td>
                <td class="text-right">{{item.age}}</td>
                <td>{{item.city | uppercase}}</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="4">
                    <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>

    <!--/row-->
</div>

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/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/router": "3.1.1",
    "@angular/upgrade": "2.1.1",
    "angular2-datatable": "^0.5.1",
...

angular-cli.json:

{
  "project": {
    "version": "1.0.0-alpha.2",
    "name": "core-ui"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "scss/style.scss"
      ],
      "scripts": [
        "../node_modules/chart.js/dist/Chart.bundle.min.js",
        "../node_modules/chart.js/dist/Chart.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false
  }
}

previousdeveloper commented 7 years ago

+1

oaverkov commented 7 years ago

Getting same error, when trying to run jasmine tests on component with datatable in the template. But page works great, just testing breaks

amellnik commented 7 years ago

I'm with @oaverkov -- the module works fine for me in components, but I can't get it working with Jasmine and Karma.

mariuszfoltak commented 7 years ago

@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

robguijt commented 7 years ago

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

mariuszfoltak commented 7 years ago

@robguijt I'll change selector of Datatable in next release, so it can be declared on any tag

kvbhaskar7 commented 7 years ago

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

kvbhaskar7 commented 7 years ago

I was able to fix this issue after importing "DataTableModule" in my module where i was importing the routing.

13lackReaper commented 7 years ago

same here by importing datatablemodule i was able to perform binding thanks guys

dwasyluk commented 7 years ago

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!

kvbhaskar7 commented 7 years ago

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.

kvbhaskar7 commented 7 years ago

Here is my systemjs.config.js for your reference, make sure you also have loadash imported.

/**

System configuration for Angular samples
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);

atodkar commented 7 years ago

Thanks @kvbhavsar7, after adding DataTableModule in parent as well as child modules, the issue is resolved.

ruchit07 commented 6 years ago

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.

mariuszfoltak / angular2-datatable

Initialisation error - There is no directive with "exportAs" set to "mfDataTable" #49