Ng2-charts: Error: "undefined" is not a chart type.

[mayureshs]

Reproduction of the problem
https://ng2-charts7-demo-crzoce.stackblitz.io

Source - https://stackblitz.com/edit/ng2-charts7-demo-crzoce

I am trying to create a line chart using static data. I am getting an error in the console.
Error: "undefined" is not a chart type. Here is the component and the template.

--------------app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs';
import { BaseChartDirective } from 'ng2-charts';
import { DataSeries, chartColors } from './models/data-series';
import { Chart} from 'chart.js';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})
export class AppComponent  {

  constructor() {   
  }

  ngOnInit() { }

  public lineChartData: any[] = [
    { data: [32, 14, 46, 23, 38, 56], label: "Sentiment Analysis" },
    { data: [12, 18, 26, 13, 28, 26], label: "Image Recognition" },
    { data: [52, 34, 49, 53, 68, 62], label: "Forecasting" }
  ];
  public lineChartLabels: string[] = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
  public lineChartOptions: any = {
    responsive: true
  };
  public lineChartColors: any[] = [
    {
      // grey
      backgroundColor: "rgba(148,159,177,0.2)",
      borderColor: "rgba(148,159,177,1)",
      pointBackgroundColor: "rgba(148,159,177,1)",
      pointBorderColor: "#fff",
      pointHoverBackgroundColor: "#fff",
      pointHoverBorderColor: "rgba(148,159,177,0.8)"
    },
    {
      // dark grey
      backgroundColor: "rgba(77,83,96,0.2)",
      borderColor: "rgba(77,83,96,1)",
      pointBackgroundColor: "rgba(77,83,96,1)",
      pointBorderColor: "#fff",
      pointHoverBackgroundColor: "#fff",
      pointHoverBorderColor: "rgba(77,83,96,1)"
    },
    {
      // grey
      backgroundColor: "rgba(148,159,177,0.2)",
      borderColor: "rgba(148,159,177,1)",
      pointBackgroundColor: "rgba(148,159,177,1)",
      pointBorderColor: "#fff",
      pointHoverBackgroundColor: "#fff",
      pointHoverBorderColor: "rgba(148,159,177,0.8)"
    }
  ];
  public lineChartLegend: true;
  public lineChartType: "line";

--------------app.component.html

     <canvas
    baseChart
    [datasets]="lineChartData"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
    [colors]="lineChartColors"
    [legend]="lineChartLegend"
    [chartType]="lineChartType"></canvas>

[paviad]

You have a little typo, it's hit me a few times in the past as well :)

public lineChartType: "line";

Should be:

public lineChartType = "line";

[mayureshs]

Thank you. Wish the debugger showed that line.