How to add HighChart to Angular?

Question

I am trying to use Highchart in my angular project, but I keep getting the following error below everytime add it to "app.module.ts". Can someone show me how to resolve this?

Failed to compile.

src/app/app.component.html:14:3 - error NG8001: 'router-outlet' is not a known element:

If 'router-outlet' is an Angular component, then verify that it is part of this module.

If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

14 ~~~~~~~~~~~~~~~

src/app/app.component.ts:5:16 5 templateUrl: './app.component.html', ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent.

The code app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HighchartsChartComponent } from 'highcharts-angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
import { FormsModule } from '@angular/forms';

import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ListComponent,
    HighchartsChartComponent
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule ,      // add this
    HttpClientModule    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I used the following command from this example https://www.itsolutionstuff.com/post/angular-8-highcharts-example-tutorialexample.html to install "HighCharts"

npm install highcharts --save
npm install highcharts-angular --save

My angular Verson

Angular CLI: 11.1.2
Node: 14.15.4
OS: win32 x64

Angular: 11.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.2
@angular-devkit/build-angular   0.1101.2
@angular-devkit/core            11.1.2
@angular-devkit/schematics      11.1.2
@schematics/angular             11.1.2
@schematics/update              0.1101.2
rxjs                            6.6.3
typescript                      4.1.3

there was nothing needed to be added for AppRoutingModule as per these examples for Angular 8/9/10 therichpost.com/angular-8-9-10-highcharts-working-example. It giving error on addmodule before i can focus on app.component.ts — user244394

raksit31667 raksit31667 · Accepted Answer · 2021-02-08T04:09:25

Please make sure you already imported HighchartsChartModule into your app.module.ts.

...
import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  imports: [
    ...
    HighchartsChartModule

Visit official documentation for more info: https://github.com/highcharts/highcharts-angular#installing

How to add HighChart to Angular?

1 Answers