Can't bind to 'type' since it isn't a known property of 'fusioncharts'

[georgeslegros]

I'm trying to add fusionchart to my application but I keep on hitting this issue and I'm not sure what is wrong with my code.

For reference I used the Angular template for dotnet core (dotnet new angular)

This created an almost empty application with just 3 pages. It also contains 3 "modules" files being app.browser.module.ts app.server.module.ts and app.shared.module.ts.

I assumed I had to drop the import config in the browser one (though I tried adding it in shared one and it still failed...)

Here is the content of this file now:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppModuleShared } from './app.shared.module';

import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';
import { AppComponent } from './components/app/app.component';
import { FusionChartsModule } from 'angular4-fusioncharts';

FusionChartsModule.fcRoot(FusionCharts, Charts, FintTheme);

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

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

The only modification I made was to add thte fusionchart related things. I also modified the home page to include a chart, both the html and the ts

Here is the full error message I have (I did not even add the end of it as it is so big...):

An unhandled exception occurred while processing the request.
NodeInvocationException: Template parse errors:
Can't bind to 'width' since it isn't a known property of 'fusioncharts'. ("
<fusioncharts
[id]="id"
[ERROR ->][width]="width"
[height]="height"
[type]="type"
"): ng:///AppModuleShared/HomeComponent.html@19:8
Can't bind to 'height' since it isn't a known property of 'fusioncharts'. ("
[id]="id"
[width]="width"
[ERROR ->][height]="height"
[type]="type"
[dataFormat]="dataFormat"
"): ng:///AppModuleShared/HomeComponent.html@20:8
Can't bind to 'type' since it isn't a known property of 'fusioncharts'. ("
[width]="width"
[height]="height"
[ERROR ->][type]="type"
[dataFormat]="dataFormat"
[dataSource]="dataSource" 
"): ng:///AppModuleShared/HomeComponent.html@21:8
Can't bind to 'dataFormat' since it isn't a known property of 'fusioncharts'. ("
[height]="height"
[type]="type"
[ERROR ->][dataFormat]="dataFormat"
[dataSource]="dataSource" 
></fusioncharts> 
"): ng:///AppModuleShared/HomeComponent.html@22:8
Can't bind to 'dataSource' since it isn't a known property of 'fusioncharts'. ("
[type]="type"
[dataFormat]="dataFormat"
[ERROR ->][dataSource]="dataSource" 
></fusioncharts> 
</div>
"): ng:///AppModuleShared/HomeComponent.html@23:8
'fusioncharts' is not a known element:
1. If 'fusioncharts' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</ul>
<div>
[ERROR ->]<fusioncharts
[id]="id"
[width]="width"
"): ng:///AppModuleShared/HomeComponent.html@17:4
Error: Template parse errors:
Can't bind to 'width' since it isn't a known property of 'fusioncharts'. ("
<fusioncharts
[id]="id"
[ERROR ->][width]="width"
[height]="height"
[type]="type"
"): ng:///AppModuleShared/HomeComponent.html@19:8
Can't bind to 'height' since it isn't a known property of 'fusioncharts'. ("
[id]="id"
[width]="width"
[ERROR ->][height]="height"
[type]="type"
[dataFormat]="dataFormat"
"): ng:///AppModuleShared/HomeComponent.html@20:8
Can't bind to 'type' since it isn't a known property of 'fusioncharts'. ("
[width]="width"
[height]="height"
[ERROR ->][type]="type"
[dataFormat]="dataFormat"
[dataSource]="dataSource" 
"): ng:///AppModuleShared/HomeComponent.html@21:8
Can't bind to 'dataFormat' since it isn't a known property of 'fusioncharts'. ("
[height]="height"
[type]="type"
[ERROR ->][dataFormat]="dataFormat"
[dataSource]="dataSource" 
></fusioncharts> 
"): ng:///AppModuleShared/HomeComponent.html@22:8
Can't bind to 'dataSource' since it isn't a known property of 'fusioncharts'. ("
[type]="type"
[dataFormat]="dataFormat"
[ERROR ->][dataSource]="dataSource" 
></fusioncharts> 
</div>
"): ng:///AppModuleShared/HomeComponent.html@23:8
'fusioncharts' is not a known element:
1. If 'fusioncharts' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</ul>
<div>
[ERROR ->]<fusioncharts
[id]="id"
[width]="width"
"): ng:///AppModuleShared/HomeComponent.html@17:4

Any clue?

[sparshbhawsar]

I am also have same problem do you get the solution.

[rousan]

@georgeslegros, can you please raise the same issue with a demo?