Can someone guide me on integrating google.visualization typings with Angular CLI?

Currently, I am facing an issue while attempting to utilize Google Charts in a project built with Angular CLI (version 7.2.3).

At first, I attempted to install the typings using the command below (both with and without the -dev flag):

npm install --save-dev @types/google.visualization

Subsequently, Visual Studio Code's intellisense immediately starts functioning, and there are no highlighted errors when executing a simple test like this:

const chartBoxStyle: google.visualization.ChartBoxStyle = {};

Unfortunately, upon building by running ng build, an error is thrown:

error TS2503: Cannot find namespace 'google'.

I attempted to rectify this by adding the following line to my file, but it did not resolve the issue:

declare const google: any;

In my tsconfig.json file, the typeRoots section is configured as shown below, with the google.visualization folder visible within:

"typeRoots": ["node_modules/@types"]

If anyone can offer assistance in overcoming this obstacle, it would be immensely appreciated as I currently don't have any further ideas on how to proceed.

angulartypescriptangular-clitypescript-typings

Answer №1

Issue Overview

An issue arises with the "types" property found in the ./src/tsconfig.app.json file.

Despite the ./tsconfig.json file at the root defining "typeRoots" to include ["node_modules/@types"], the ./src/tsconfig.app.json file overrides this by setting its own types property to an empty array.

Resolution

To address this problem, modifications can be made within the ./src/tsconfig.app.json file:

  • Remove the "types": []" property; this action will prompt the compiler to incorporate all packages specified in typeRoots.

  • Alternatively, insert the desired types into the "types": []" array.

If choosing the latter option, adjustments should resemble the following example: 

"types": [
  "google.visualization"
]

Detailed Explanation

The configuration for ng build is retrieved from the ./angular.json file.

Within this ./angular.json file, "tsConfig" points to "src/tsconfig.app.json".

Furthermore, the ./src/tsconfig.app.json file sets its "types" property to an empty array.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []  <------------------------------- empty array
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

This is where the complication arises, as explained in the TypeScript documentation: "If types is specified, only packages listed will be included."

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verify if TypeScript object contains a specific key dynamically without the need for a custom type guard

Using TypeScript's in keyword allows us to check if an object contains a specific key in a type-safe manner when the key is defined as a string literal: function guardHasTest <Data extends object> ( value: Data ): Data & Record<'te ...

typescript

What is the best way to clear data in a block after it has been clicked

Whenever the user clicks the "Load new data" button, it displays the data in the template. How can we ensure that old data is cleared after each click until new data is loaded? Additionally, the "Open card" button disappears after being clicked. I attempt ...

angularrxjs

What is the method to cancel an Observable subscription without having a reference to the object of type "Subscription"?

If I were to subscribe to an Observable without an object of type "Subscription," how can I properly unsubscribe from it? For instance, if my code looks something like this: this.subscription = bla ... I know I can easily unsubscribe using the following ...

angulartypescriptobservablesubscription

Is there a way to have a tooltip expand beyond the boundaries of its table cell?

I'm having trouble with a Tooltip issue. When I hover over the row, the tooltip for icons appears cut off from the top. This only seems to happen in the 1st row of the table, while it looks fine in all other rows. Please refer to the attached image fo ...

angularbootstrap-4

"Encountering the error message "Uncaught TypeError: $(...).summernote is not a function" while working with

I've encountered an issue while trying to implement summernote into my Angular app. I keep receiving the error message "$(...).summernote is not a function" and it seems like summernote is not loading properly on the page. I'm unsure of what step ...

jqueryangularsummernote

The issue with Rxjs forkJoin not being triggered within an Angular Route Guard

I developed a user permission service that retrieves permissions from the server for a specific user. Additionally, I constructed a route guard that utilizes this service to validate whether the user possesses all the permissions specified in the route. To ...

angulartypescriptrxjs

Creating an Ionic 2 hybrid mobile app with a navigation controller: Step-by-step guide

While Angular 2 has been officially released, Ionic 2 is still in beta. I'm on the lookout for some great examples of Ionic 2 Hybrid Mobile Apps with a Navigation Controller. I stumbled upon this helpful tutorial at Icoderslab. Are there any other res ...

angularjsangularionic-frameworkionic2

How can I create an Array of objects that implement an interface? Here's an example: myData: Array<myInterface> = []; However, I encountered an issue where the error message "Property 'xxxxxx' does not exist on type 'myInterface[]'" appears

Currently, I am in the process of defining an interface for an array of objects. My goal is to set the initial value within the component as an empty array. Within a file, I have created the following interface: export interface myInterface{ "pictur ...

angulartypescript

Tips for preventing <v-layouts> from impacting one another

I'm currently working on a dynamic link box for a homepage website, which can be viewed at . Inside this link box, I have included a button that allows the creation of buttons that function as links. Interestingly, the layouts of both the options but ...

htmltypescriptvuetify.js

Encountering a critical issue with Angular 12: FATAL ERROR - The mark-compacts are not working effectively near the heap limit, leading to an allocation failure due

After upgrading my Angular application from version 8 to 12, I encountered an issue. Previously, when I ran ng serve, the application would start the server without any errors. However, after updating to v12, I started receiving an error when I attempted t ...

javascriptangularangular-cli

Utilizing Vue and TypeScript - Retrieving a Variable Declared in the Data() Method within Another Method

I recently made the switch to using Vue3 with TypeScript after previously working with Vue2 and JavaScript. I am encountering an issue in my IDE where it is showing an error (even though the code itself functions correctly, but may not be entirely accurate ...

typescriptvue.js

What is the reason behind the varying display of values?

When trying to set a value using the input tag, I encountered an issue. For example, if I type 1000.0009 into the input text, the valid value should be 1000.0001. However, the value displayed in the input tag is incorrect, while the value outside the tag i ...

javascripthtmlangulartypescript

Troubleshooting Electron Angular Application Connectivity Issues with API

While developing my ionic/angular app as an electron app, I encountered a problem when running it. After loading, I received the error message shown below: Refused to connect to 'https://xxxxxxxxxx.com/whpacking/v1/getlocations' because it violat ...

angularionic-frameworkelectronelectron-packager

What is the reason for the allowance of numeric keys in the interface extension of Record<string, ...>

I am currently working on a method to standardize typing for POST bodies and their corresponding responses with API routes in my Next.js application. To achieve this, I have created an interface that enforces the inclusion of a body type and a return type ...

typescriptgenerics

The natural elements are so minuscule they are practically nonexistent

When referencing my DOM element using ViewChild in the code, I sometimes encounter an issue where the offsetHeight and offsetWidth are zero in the ngAfterViewInit hook. This leads me to believe that the element has not yet been rendered in the DOM. Are the ...

javascriptangulartypescriptionic-frameworkleaflet

Encountering a compilation error due to a Typescript assignment

While working with Typescript, I encountered a compilation error in the code shown below: console.log('YHISTORY:login: data = '+data); let theData = JSON.parse(data); console.log('YHISTORY:login: theData = '+JSON.stringify(theData)); ...

typescript

Guide on effectively leveraging a single variable to both store the outcome of setInterval() and send it as an argument to clearInterval()

I'm trying to work with the same variable to handle the return value of setInterval() and then pass it as an argument to clearInterval() in TypeScript. The issue I'm facing is that setInterval() gives back a NodeJS.Timer while clearInterval() exp ...

typescriptsetintervalclearinterval

"Omitting the parameter value when passing it to a directive in Angular

I recently developed a Directive in Angular7, but I encountered an issue when trying to pass a string value from the HTML to the directive. When using the following code snippet in my HTML: <ng-template [appValidatePermission]='CreateRole'&g ...

javascriptangulartypescriptangular7angular-directive

Error encountered when providing valid data types as arguments in a React/Typescript function

I am facing an issue when passing a string variable to a function. To address this, I have created an interface called MyMessageProps where I declare the message as a string. Subsequently, the function MyMessage utilizes this interface to return with the ...

reactjstypescripttypesstatic

Angular object contains an unidentified property

While trying to send an object to the backend, I encountered an UnrecognizedPropertyException. Upon inspecting the object on both the frontend and backend, they appear to be identical. However, upon checking the object in the frontend console, I discovere ...

javaangulartypescriptrest