Ngx-charts: isn't a known property of 'ngx-charts-bar-vertical'

[armarton]

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
I've tried to reproduce a simple vertical bar based on the documentation, and I've got the following error in the console:

Can't bind to 'view' since it isn't a known property of 'ngx-charts-bar-vertical'.

Of course not just for 'view', but for all attributes of the tag.

Please tell us about your environment:
Ubuntu, NPM, angular-cli

• ngx-charts version: 4.0.1

• Angular version: 2.2.3

• Browser: Chrome

• Language: TS

[marjan-georgiev]

are you including NgxChartsModule in your app?

[armarton]

Here you can see the code of my app.module.ts (uncutted)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';
import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import 'hammerjs';

import { AppComponent } from './app.component';
import { CardsContainerComponent } from './users.component';
import { UserService } from './service/rest.service';

@NgModule({
  declarations: [
    AppComponent,
    CardsContainerComponent
  ],
  imports: [
    Angular2FontawesomeModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule.forRoot(),
    NgxChartsModule
  ],
  providers: [
    UserService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

[mburger81]

I have the same problem for ngx-charts-line-chart

Can't bind to 'view' since it isn't a known property of 'ngx-charts-line-chart'
...
Can't bind to 'results' since it isn't a known property of 'ngx-charts-line-chart'
...

Naturally I included NgxChartsModule in my module

import { NgxChartsModule } from '@swimlane/ngx-charts';
@NgModule({
    imports: [ IonicModule, NgxDatatableModule, NgxChartsModule ],
....

If I remove import of NgxChartsModule I get as expected error on ngx-charts-line-chart html tag, so module is included, I tried older versions of your charts lib but always the same problem. So probably the problem is deeper. I'm using ionic 2.0.1 which is using angular 2.2.1 and bundle with webpack

ngx-charts version: 4.0.1

Angular version: 2.2.1

Ionic version: 2.0.1

Browser: Chrome

Language: TS

[marjan-georgiev]

@mburger81 @armarton any change you can provide a github repository where this can be reproduced?

[mburger81]

@marjan-georgiev
I created a simple ionic2 project and included your ngx-charts and d3, added in app.html the tag and in app.component the properties

here the repository
https://github.com/mburger81/ionic2-ngx-charts

you have to do
npm install -g ionic cordova
ionic serve

now you can see the error in the console

p.s. sorry for my short description but I have to go,
thx

[mburger81]

Some news about this issue?

I posted my problem also on the ionic forum where I linked this bug here
See the post:
https://forum.ionicframework.com/t/ionic2-using-swimlane-ngx-datatable-and-swimlane-ngx-charts/80274

[mburger81]

In meantime I think the problem is the angular2 vesion, which is the minimum required? I presume 2.4.5 as used in package.json

[marjan-georgiev]

Is this still an issue with ngx-charts 5.2.x?

[pl-j]

We are having the same problem, using ngx-charts 5.3.1 and angular 4.1.3. No Ionic here, juste a barebones Angular project w/ SystemJS as the loader.

[sharath1608]

Any resolution yet? Facing the same problem with ngx-charts 5.3.1 and Angular 4.1.0

[GoergeBanana]

Any solutions yet?

Can't bind to 'view' since it isn't a known property of 'ngx-charts-line-chart'.

It keeps frustrating me. Using Angular 2.4.10 and tried literally every ngx-charts version

[sharath1608]

@GoergeBanana @pl-j @mburger81 I got around this problem by importing 'NgxChartsModule' in my module corresponding to the component that uses the library instead of AppModule. Not sure if I'm clear and if it'll really works for others, but it did in my case. Good luck!

[GoergeBanana]

@sharath1608 Thank You so much! I had my whole code inside of the component, not inside the module. Thx for sharing

For those using Angular 2.x
keep in mind that you have to use ngx-charts 4.x. Version 5 is not compatible

[pl-j]

Thanks @sharath1608 !! That indeed solved the problem. Not sure if we were in the wrong, or if something should be patched in NgxChartsModule, but we can go on anyway. :)

[ryansealy]

Same issue here on clean new yeoman template. This makes ngx-charts unusable at the moment. Can this be escalated?

>yo aspnetcore-spa
>npm install @swimlane/ngx-charts --save
>npm install d3 --save

package.json

{
  "name": "WebApplicationBasic",
  "version": "0.0.0",
  "dependencies": {
    "@angular/animations": "4.1.2",
    "@angular/common": "4.1.2",
    "@angular/compiler": "4.1.2",
    "@angular/core": "4.1.2",
    "@angular/forms": "4.1.2",
    "@angular/http": "4.1.2",
    "@angular/platform-browser": "4.1.2",
    "@angular/platform-browser-dynamic": "4.1.2",
    "@angular/platform-server": "4.1.2",
    "@angular/router": "4.1.2",
    "@swimlane/ngx-charts": "^5.3.1",
    "@types/node": "7.0.18",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^2.0.5",
    "aspnet-webpack": "^1.0.29",
    "awesome-typescript-loader": "3.1.3",
    "bootstrap": "3.3.7",
    "css": "2.2.1",
    "css-loader": "0.28.1",
    "d3": "^4.9.1",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.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.0",
    "style-loader": "0.17.0",
    "to-string-loader": "1.1.5",
    "typescript": "2.3.2",
    "url-loader": "0.5.8",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.0",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.10"
  },
  "devDependencies": {
    "webpack": "^2.5.1"
  }
}

webpack.config.vendor.js:

vendor: [
                '@angular/animations',
                '@angular/common',
                '@angular/compiler',
                '@angular/core',
                '@angular/forms',
                '@angular/http',
                '@angular/platform-browser',
                '@angular/platform-browser-dynamic',
                '@angular/router',
                '@swimlane/ngx-charts',
                'bootstrap',
                'bootstrap/dist/css/bootstrap.css',
                'd3',
                'es6-shim',
                'es6-promise',
                'event-source-polyfill',
                'jquery',
                'zone.js',
            ]

app.module.client.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { sharedConfig } from './app.module.shared';

@NgModule({
    bootstrap: sharedConfig.bootstrap,
    declarations: sharedConfig.declarations,
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        NgxChartsModule,
        ...sharedConfig.imports
    ],
    providers: [
        { provide: 'ORIGIN_URL', useValue: location.origin }
    ]
})
export class AppModule {
}

home.component.html

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

@Component({
    selector: 'home',
    template: `
        <h1>New Home Page</h1>
        <ngx-charts-line-chart></ngx-charts-line-chart>
    `
})
export class HomeComponent {
}

Error is "Exception: Call to Node module failed with error: Error: Template parse errors:
'ngx-charts-line-chart' is not a known element:"

Or if you'd prefer to modify the Home component so the chart contains all the properties from the documentation example, then you'll get the error mentioned at the top of this thread:

Can't bind to 'view' since it isn't a known property of 'ngx-charts-bar-vertical'

@sharath1608 I'd love to understand your workaround better, as would others I think.

[Abiwax]

Has anyone been able to solve this issue, having the same issue in ionic 3 Angular 4

[pantonis]

I had the same problem. NgxChartsModule was not included in my lazy.module.
I had it only in the app.module but not in my lazy.module that the chart was actually being used

[nblavoie]

Add it to the imports of your feature (lazy loaded) module; it will solve this issue. Not in your Shared Module (if you have one), not in your Core Module (if you have one) and not in the App Module (you do have one, I hope).

[AngularCoder89]

@marjan-georgiev @nblavoie What does Lazy loaded module mean? Is it the component where the ngx chart is actually being rendered from?

i have tried with all the versions, i suppose but still getting an error.

Error:- Can't bind to 'view' since it isn't a known property of 'ngx-charts-line-chart'.

1. If 'ngx-charts-line-chart' is an Angular component and it has 'view' input, then verify that it is part of this module.
2. If 'ngx-charts-line-chart' 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. ("

  [ERROR ->][view]="view"

  [scheme]="colorScheme"

  [results]="multi"

"): ng:///MessagesModule/InterfaceViewComponent.html@177:6
Can't bind to 'scheme' since it isn't a known property of 'ngx-charts-line-chart'.

1. If 'ngx-charts-line-chart' is an Angular component and it has 'scheme' input, then verify that it is part of this module.
2. If 'ngx-charts-line-chart' 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. ("
   

  [view]="view"

  [ERROR ->][scheme]="colorScheme"

  [results]="multi"

  [gradient]="gradient"

Angular dependencies:-
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"@swimlane/ngx-charts": "^7.0.1",
"@swimlane/ngx-datatable": "^11.1.2",
"adal-angular": "^1.0.15",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"d3": "^4.12.2",
"expose-loader": "^0.7.4",
"file-saver": "^1.3.3",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular-devkit/core": "0.0.28",
"@angular/cli": "1.5.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",
"@types/adal": "^1.0.29",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"cross-env": "^5.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
}

I would really appreciate the response.

[AngularCoder89]

added the Import statement in "Lazy Module" and it worked. Apart from app module, there was another module the import statement was to be added.

Works fine now.

[queejie]

I'm getting this error with ngx-charts 7.0.1 and angular 5.1.3:

Can't bind to 'view' since it isn't a known property of 'ngx-charts-line-chart'.

I have tried importing it in the app module and the shared module, and both modules. If I remove all the attributes from the ngx-charts-line-chart tag it does not recognize the tag. I am using angular cli, and it builds fine for dev, but not for prod.

import {NgxChartsModule} from '@swimlane/ngx-charts';

(Fixed later by adding NgxChartsModule to both the imports and exports for my shared module, and not in the app module.)

[marjan-georgiev]

@queejie are you importing the module in your app.module.ts, like this:

imports: [NgxChartsModule]

[queejie]

@marjan-georgiev Yes, I am. I use more than a dozen modules, and all others work fine.

[queejie]

I was able to fix it by adding to the exports as well.

[marjan-georgiev]

That's weird. You shouldn't have to do that. Any chance you can create a repository where this can be reproduced?

[queejie]

@marjan-georgiev I'm sorry, but I think creating a repo would take me a long time. Our app is very large, with 6 modules, all using a shared module, and we have a short deadline to get it ready. I'm very happy to have it working. I think the philosophical approach to this module is very sound and appreciate having it available.

[wooltar]

add NgxChartsModule to imports in lazy module, runs for me.
package.json:
"@angular/animations": "^5.2.5",
"@angular/common": "^5.2.5",
"@angular/compiler": "^5.2.5",
"@angular/core": "^5.2.5",
"@angular/forms": "^5.2.5",
"@angular/http": "^5.2.5",
"@angular/platform-browser": "^5.2.5",
"@angular/platform-browser-dynamic": "^5.2.5",
"@angular/platform-server": "^5.2.5",
"@angular/router": "^5.2.5",
"@swimlane/ngx-charts": "^7.0.1",

@NgModule({
imports: [
CommonModule,
DashboardRoutingModule,
ChartistModule,
NgbModule,
MatchHeightModule,
NgxChartsModule
],
exports: [],
declarations: [
Dashboard1Component,
],
providers: []
})
export class DashboardModule { }

[Hypercubed]

Please reopen if this is still an issue.

[mohammadafnan]

attempted to import into ngmodule in app.module.ts and attempted to use in my component but failed.

After that I tried importing into ngmodule and exporting as well in ngmodule in app.module.ts . After this fix chart components were rendering in my component. Using angular 7.0.2

This issue needs to be fixed please.

[blkrs]

I had similar problem in tests - solved by importing NgxChartsModule ( imports [ NgxChartsModule, .. ]) in app.component.spec.ts and then in each component test where it was used _directly_ or by a _child_component_ . ( beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [NgxChartsModule, ).

[ShehanAT]

@GoergeBanana @pl-j @mburger81 I got around this problem by importing 'NgxChartsModule' in my module corresponding to the component that uses the library instead of AppModule. Not sure if I'm clear and if it'll really works for others, but it did in my case. Good luck!

Yep, this worked for me as well!