Angular 4 doesn't see installed packages with npm

Question

I'm starting my adventure with ASP.NET Core and Angular 4. I started Angular template project in VisualStudio.

I created some basic pages and tried to install ngx-datatable module with npm. I've done everything from demo ngx-databtable Documentation

My package.json:

"dependencies": {
    "@angular/animations": "4.2.5",
    "@angular/common": "4.2.5",
    "@angular/compiler": "4.2.5",
    "@angular/compiler-cli": "4.2.5",
    "@angular/core": "4.2.5",
    "@angular/forms": "^4.2.5",
    "@angular/http": "4.2.5",
    "@angular/platform-browser": "4.2.5",
    "@angular/platform-browser-dynamic": "4.2.5",
    "@angular/platform-server": "4.2.5",
    "@angular/router": "4.2.5",
    "@ngtools/webpack": "1.5.0",
    "@swimlane/ngx-datatable": "^10.2.3",
    "@types/ui-grid": "0.0.38",
    "@types/webpack-env": "1.13.0",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "gulp": "^3.9.1",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "typescript": "^2.3.4",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.12"
},
"devDependencies": {
    "@angular/cli": "^1.4.6",
    "@types/chai": "4.0.1",
    "@types/jasmine": "2.5.53",
    "chai": "4.0.2",
    "jasmine-core": "2.6.4",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.3"
}

After running with Debug -> Run without debugging I got such error:

NodeInvocationException: Template parse errors:
Can't bind to 'rows' since it isn't a known property of 'ngx-datatable'.
1. If 'ngx-datatable' is an Angular component and it has 'rows' input, then verify that it is part of this module.
2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<div class="col-md-12 tab">
<div>
<ngx-datatable [ERROR ->][rows]="rows"
[columns]="columns">
</ngx-datatable>
"): ng:///AppModuleShared/WorkersComponent.html@11:23
Can't bind to 'columns' since it isn't a known property of 'ngx-datatable'.
1. If 'ngx-datatable' is an Angular component and it has 'columns' input, then verify that it is part of this module.
2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<div>
<ngx-datatable [rows]="rows"
[ERROR ->][columns]="columns">
</ngx-datatable>
</div>
"): ng:///AppModuleShared/WorkersComponent.html@12:23
'ngx-datatable' is not a known element:

Could anyone suggest what may be the reason of that and what are the most common mistakes, which leads to such error?

Thanks in advance!

============== EDIT ========================

I've already imported NgxDatatableModule like it was in Demo, despite this the error is occuring.

My AppModule file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppModuleShared } from './app.module.shared';
import { AppComponent } from './components/app/app.component';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@NgModule({
    bootstrap: [AppComponent],
    imports: [
        BrowserModule,
        AppModuleShared,
        NgxDatatableModule
    ],
    providers: [
        { provide: 'BASE_URL', useFactory: getBaseUrl }
    ]
})
export class AppModule {
}

export function getBaseUrl() {
    return document.getElementsByTagName('base')[0].href;
}

And view in which I try to use this table:

<div>
    <ngx-datatable [rows]="rows"
                   [columns]="columns">
    </ngx-datatable>
</div>

And controller

import { Component } from '@angular/core';

@Component({
    selector: 'workers',
    templateUrl: './workers.component.html',
    styleUrls: ['./workers.component.css', '../app.module.css']
})
export class WorkersComponent { 
    rows = [
        { name: 'Austin', gender: 'Male', company: 'Swimlane' },
        { name: 'Dany', gender: 'Male', company: 'KFC' },
        { name: 'Molly', gender: 'Female', company: 'Burger King' },
    ];
    columns = [
        { prop: 'name' },
        { name: 'Gender' },
        { name: 'Company' }
    ];
}

Should I change anything in default config in order to move files from imported ngxDataTable to wwwroot?

did you ever find a solution to this? I have the same problem. — Ree
– Ree, Commented Jul 8, 2021 at 18:19

spottedmahn · Accepted Answer · 2017-10-12 20:53:15Z

1

After installing the ngx-datatable using npm install you have to add this to your app module as well to use its component

As the error message says it is not able to bind row and known properites to ngx-datatable

Can't bind to 'rows' since it isn't a known property of 'ngx-datatable'.

It means its unable to find ngx-datatable directive.

So import NgxDatatableModule in your app module and it will make available all the component and directive in your app.

@NgModule({
  declarations: [AppComponent],
  imports: [NgxDatatableModule, BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

edited Oct 12, 2017 at 20:53

spottedmahn

16.2k21 gold badges124 silver badges204 bronze badges

answered Oct 12, 2017 at 17:31

Aniruddha Das

21.8k27 gold badges104 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Filip Szesto Over a year ago

Thanks for answer. I've already imported NgxDatatableModule despite that the error is occuring. I've updated main question.

Filip Szesto Over a year ago

No, it's a part of the AppModule.

Collectives™ on Stack Overflow

Angular 4 doesn't see installed packages with npm

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related