Angular version support

[FERNman]

Hey everyone! First of all, sorry for not being as active during the last 1-2 years. I've been quite busy at work and didn't have much time to look into web development. As I now have some more time again, I'll try to dedicate some time and love to this package 🙂

First things first, I'll create a final release for Angular 12 with the current versioning (would be 2.2.4 then), supporting Angular 12-15. The next step will be to create a new release that aligns with the recent developments in the world of Angular (standalone components, mostly, but also the way overdue Ivy support (#144 and #257). This release will support Angular 16 and up.

However, I'm now thinking of how to approach versioning to be better prepared for future version changes of Angular. I've learned by now that it's important to only change the supported Angular version in major releases of the package to not break build systems (sorry) 😄 I'd like to keep supporting at least the 2 previous major Angular versions with this package (as is the convention by the Angular core team), but nevertheless integrate new approaches to Angular development as they appear.

Are there recommended approaches in the Angular world on how to handle this?

I'll close the other issues on version support in favor of this one:

• Angular 16 support #300
• Angular 18 support #309
• Update peerDependencies for Angular 15 #292

[dmauro13]

Amazing! Welcome back!
May I suggest to add some trusted collaborators to bring on the project in case you don't have much time? If you have them.
This library has become popular and used

[FERNman]

I'd be more than happy to do so if we find 2-3 volunteers!

[jdegand]

Check out ng16-dep-audit to see what dependencies need to change for the upgrade to Angular 16.

I've noticed most libraries move to version matching i.e. Angular 16 and this package would be version 16 and so on.

[FERNman]

Yeah, I think matching the version of the package with the minimum supported Angular version sounds fair.
I'll create a branch for Angular v12-15 and do one release v12.0.0. Afterward, I'll merge the PR for Angular 16-18 and release it as v16.0.0 from the main branch.

I hope this suits everyone! If you have other suggestions please let me know, I'll wait for a couple more days before I merge and release 🙂

[HenriqueEichstadt]

Welcome back!

[bittu-kumar-tfs]

Can you mention anywhere in description which angular version support which version of this package.

Currently I am looking for supported version with angular16.

[FERNman]

Just released a new version that supports Angular 16 an up 🎉

[bittu-kumar-tfs]

Thanks for the merge,
Lot of error went away but I am still getting some error from this package,

Error: node_modules/angular-google-charts/lib/components/chart-editor/chart-editor-ref.d.ts:2:23 - error TS2688: Cannot find type definition file for 'projects/angular-google-charts/src/lib/components/chart-editor/chart-editor'.

2 ///

Error: node_modules/angular-google-charts/lib/components/chart-editor/chart-editor-ref.d.ts:8:46 - error TS2694: Namespace 'google.visualization' has no exported member 'ChartEditor'.

8 constructor(editor: google.visualization.ChartEditor);
~~~~~~~~~~~

Error: node_modules/angular-google-charts/lib/components/chart-editor/chart-editor.component.d.ts:1:23 - error TS2688: Cannot find type definition file for 'projects/angular-google-charts/src/lib/components/chart-editor/chart-editor'.

1 ///

Error: node_modules/angular-google-charts/lib/components/chart-editor/chart-editor.component.d.ts:15:72 - error TS2694: Namespace 'google.visualization' has no exported member 'ChartEditor'.

15 get initialized$(): import("rxjs").Observable<google.visualization.ChartEditor>;

Error: node_modules/angular-google-charts/lib/components/chart-editor/chart-editor.component.d.ts:25:67 - error TS2694: Namespace 'google.visualization' has no exported member 'ChartEditorOptions'.

25 editChart(component: ChartBase, options: google.visualization.ChartEditorOptions): ChartEditorRef;

can you help us quickly, We are stuck in angular project migration due to this.

[Robinl2018]

Hi, I´m using this component with angular 19, can you tell me if it supports angular 19?
Thanks a lot

[dmauro13]

Hi, I´m using this component with angular 19, can you tell me if it supports angular 19? Thanks a lot

I'm using Angular 19, no problem at all

[Robinl2018]

Hi, I´m using this component with angular 19, can you tell me if it supports angular 19? Thanks a lot

I'm using Angular 19, no problem at all

Hi, I can't get it to show me the graphics

This is my main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';
import { GoogleChartsConfigService, googleChartsConfigFactory } from './app/services/gchart.service';
import { GOOGLE_CHARTS_LAZY_CONFIG } from 'angular-google-charts';

bootstrapApplication(AppComponent, {providers: [provideHttpClient(),
                                                provideRouter(routes),
                                                GoogleChartsConfigService,
                                                {provide: GOOGLE_CHARTS_LAZY_CONFIG, useFactory: googleChartsConfigFactory, deps: [GoogleChartsConfigService]}
                                              ]
                                    }
                    )
  .catch(err => console.error(err));

This is my html

        <div *ngFor="let chart of charts">
          <google-chart

            [title]="chart.title"
            [type]="chart.type"
            [data]="chart.data"
            [columns]="chart.columns"
          >
          </google-chart>
        </div>

This is component.ts

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { GoogleChartsModule, ChartType, Column } from 'angular-google-charts';
import { NgFor } from '@angular/common';

@Component({
  selector: 'app-dashboar',
  imports: [FormsModule, GoogleChartsModule, NgFor],
  templateUrl: './dashboar.component.html',
  styleUrl: './dashboar.component.scss',
  standalone: true
})
export class DashboarComponent implements OnInit {

 public charts: {
    title: string;
    type: ChartType;
    data: any[][];
    columns?: Column[];
    options?: {};
  }[] = [];

  constructor() {
    this.charts.push({
      title: 'Pie Chart',
      type: ChartType.PieChart,
      columns: ['Task', 'Hours per Day'],
      data: [
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]
    });

    this.charts.push({
      title: 'Bar Chart',
      type: ChartType.BarChart,
      columns: ['Element', 'Density', { role: 'style', type: 'string' }],
      data: [
        ['Copper', 8.94, '#b87333'],
        ['Silver', 10.49, 'silver'],
        ['Gold', 19.3, 'gold'],
        ['Platinum', 21.45, 'color: #e5e4e2']
      ]
    });
  }

  ngOnInit(){}
}

Could you help me please?

[FERNman]

Hi @Robinl2018, Your example seems to work for me! If you're still facing issues, please try to figure out whether it's a bug and open a separate issue if that's the case. Thanks 🙂