Angular Google Charts - Environment Setup

This tutorial will guide you on how to prepare a development environment to start your work with Google Charts and Angular Framework. In this chapter, we will discuss the Environment Setup required for Angular. To install Angular, we require the following −

• Node
• Npm
• Angular CLI
• IDE for writing your code

Nodejs has to be greater than 8.11 and npm has to be greater than 5.6.

Nodejs

To check if nodejs is installed on your system, type node -v in the terminal. This will help you see the version of nodejs currently installed on your system.

C:\>node -v
v24.11.0

If it does not print anything, install nodejs on your system. To install nodejs, go the homepage https://nodejs.org/en/download/ of nodejs and install the package based on your OS.

Based on your OS, install the required package. Once nodejs is installed, npm will also get installed along with it. To check if npm is installed or not, type npm -v in the terminal. It should display the version of the npm.

C:\>npm -v
11.6.1

Angular installations are very simple with the help of angular CLI. Visit the homepage https://cli.angular.io/ of angular to get the reference of the command.

Type following command, to install angular cli on your system.

D:\Projects> mkdir googleChartsApp
 
D:\Projects> cd googleChartsApp

D:\Projects\googleChartsApp> npm install -g @angular/cli@20.0.0

You will get the above installation in your terminal, once Angular CLI is installed. You can use any IDE of your choice, i.e., WebStorm, Atom, Visual Studio Code, etc.

Create new Project

Create a new angular project.

D:\Projects]\googleChartsApp > ng new google-charts-app

Update package.json to use Angular 20.0.0 version.

package.json

{
  "name": "google-charts-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "prettier": {
    "printWidth": 100,
    "singleQuote": true,
    "overrides": [
      {
        "files": "*.html",
        "options": {
          "parser": "angular"
        }
      }
    ]
  },
  "private": true,
  "packageManager": "npm@11.6.1",
  "dependencies": {
    "@angular/common": "^20.0.0",
    "@angular/compiler": "^20.0.0",
    "@angular/core": "^20.0.0",
    "@angular/forms": "^20.0.0",
    "@angular/platform-browser": "^20.0.0",
    "@angular/router": "^20.0.0",
    "angular-google-charts": "^16.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0"
  },
  "devDependencies": {
    "@angular/build": "^20.0.0",
    "@angular/cli": "^20.0.0",
    "@angular/compiler-cli": "^20.0.0",
    "jsdom": "^27.1.0",
    "typescript": "~5.9.2",
    "vitest": "^3.1.1"
  }
}

Install Google Charts Wrapper

Run the following command to install Google Charts Wrapper module in the project created.

D:\Projects\googleChartsApp\google-charts-app>npm install angular-google-charts

added 97 packages, removed 47 packages, changed 131 packages, and audited 682 packages in 30s

Update app.config.ts file to include google charts and make it zoneless.

import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideGoogleCharts } from 'angular-google-charts';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes),
    provideGoogleCharts(),
    provideZonelessChangeDetection(),
  ]
};