Can't bind to 'chart' since it isn't a known property of 'div'. about angular-highcharts HOT 11 CLOSED

Hello,
In your angular App if you have submodules and inside that module's component file if you are trying to implement any chart , you will get above error, but if you import same things and other code as you do in app.module.ts as mentioned in API doc and usage then your problem will get solved.I dont know this is ideal solution or not but I have done this and removed this code from main app.module.ts.

Hope this helps someone.

from angular-highcharts.

Can you show your app.module.ts ?

from angular-highcharts.

• youvshould import the chartModel into app.module.ts or current index.ts

from angular-highcharts.

Closing this, feel free to reopen!

from angular-highcharts.

@superestze I got a same issue. But I can't find any chartModel here? Can you show me?

from angular-highcharts.

@th0g0th please post you app.module.ts

from angular-highcharts.

@cebor I'm using angular-seed.
If i change [chart] to ([chart]), this error will not show. But the highcharts will not display also.

<div ([chart])="chart"></div>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { AboutModule } from './about/about.module';
import { HomeModule } from './home/home.module';
import { SharedModule } from './shared/shared.module';
import { ChartModule } from 'angular-highcharts';

@NgModule({
  imports: [BrowserModule, HttpModule, AppRoutingModule, AboutModule, HomeModule, ChartModule, SharedModule.forRoot()],
  declarations: [AppComponent],
  providers: [{
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  }],
  bootstrap: [AppComponent]

})
export class AppModule { }

system.config.js

    packages: {
      highcharts: {
        main: './highcharts.js',
        defaultExtension: 'js'
      },
      'angular-highcharts': {
        main: './angular-highcharts.js',
        defaultExtension: 'js'
      }
    }

from angular-highcharts.

Appmodule seems to be configured correct.

Maybe you have to import it also in the submodule where you using it within.

from angular-highcharts.

@th0g0th i see you using systemjs, please try to use ./angular-highcharts.umd.js

from angular-highcharts.

@Cedor It’s not working.

Maybe you can try using your angular-highcharts on angular-seed to easy to test.

from angular-highcharts.

@th0g0th if you create a repo where this issue is reproducible i can take look at it.

from angular-highcharts.