Issue encountered with the "angular 2-google-chart" plugin

Looking to incorporate the " angular2-google-chart" module in my project.

However, upon starting the application, I encounter the following error:

ERROR in ./node_modules/angular2-google-chart/directives/angular2-google-chart.directive.ts Module build failed: Error: /home/user/Desk/project/frontend/node_modules/angular2-google-chart/directives/angular2-google-chart.directive.ts is missing from the TypeScript compilation. Please make sure it is included in your tsconfig file via the 'files' or 'include' property. The absence of this file suggests that it may be part of a poorly packaged third-party library. TypeScript files within published libraries oftentimes indicate improper packaging. To address this issue, please raise a concern with the library's author and request them to package the library according to the Angular Package Format (/goo.gl/jB3GVv). at AngularCompilerPlugin.getCompiledFile (/home/user/Desk/project/frontend/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:674:23) at plugin.done.then (/home/user/Desk/project/frontend/node_modules/@ngtools/webpack/src/loader.js:467:39) at at process._tickCallback (internal/process/next_tick.js:182:7)

Any suggestions on resolving this error?

angulartypescript

Answer №1

If you are facing the error path problem, try copying the 

angular2-google-chart.directive.ts
file and pasting it into your project folder such as assets. Then import and use it to solve the issue.

Here is a demo example I created using the "angular2-google-chart" mentioned by you:

https://stackblitz.com/edit/angular-zp46ve

To install, run the following command:

npm install angular2-google-chart

In your index.html file, add the following script:

<head>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>  
        // !important: Ensure this variable is set to false (var googleLoaded = false;). This allows running multiple charts in your project.
        var googleLoaded = false;
        // !important: Specify which chart packages to preload. It will load any package on demand if not already loaded.
        var googleChartsPackagesToLoad = ['geochart'];
    </script>
    </head>

In your app.module.ts file, import the GoogleChart module:

import {GoogleChart} from './angular2-google-chart.directive';

@NgModule({
  declarations: [
    GoogleChart
  ],...

Check out the output screenshot here: https://i.sstatic.net/vTkvA.png

I hope this information helps you get started. If you encounter any errors, feel free to let me know.

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

Tips for managing Typescript Generics while utilizing the styled function provided by the '@mui/material/styles' package

import Table,{TableProps} from 'my/table/path' const StyledTable = styled(Table)({ ...my styles }) const CustomTable = <T, H>(props: TableProps<T, H>) => { return <StyledTable {...props} /> } This is the issue I encoun ...

reactjstypescriptmaterial-ui

Modifying a Component's Value in its Template Based on an IF Condition in Angular 6

How can I display or hide the 'separator-container' based on a specific condition in the row data? The condition to satisfy is mentioned as "myConditionCheck" in the 5th line of code. I attempted to achieve this by using "isWarningSeperatorVisib ...

angularangular-controller

Creating multiple charts with Chart.js in an Angular component is a breeze

Working on an Angular 6 Project, I have a Component that receives a tile Object from its parent. The goal is to generate a Chart using chart.js for each passed tile. The issue is that only the first Chart gets rendered successfully, while the rest fail wit ...

javascripttypescriptchart.jsangular6

Efficiently load NativeScript Angular modules with Webpack for improved performance

I am interested in incorporating lazy loading of feature modules into my NativeScript + Angular project. I'm curious if there are any extra steps I need to take with Webpack in order to enable lazy loading functionality? ...

angularwebpacklazy-loadingnativescriptnativescript-angular

Invalid Type Property - Request and Response Express Types

When I try to utilize the Request or Response types in this manner: app.use('*', (req: Request, res: Response, next: NextFunction) => { res.set('Cache-Control', 'no-store'); const requestId: string = req.headers[&a ...

node.jstypescriptexpress

Creating personalized properties for a Leaflet marker using Typescript

Is there a way to add a unique custom property to each marker on the map? When attempting the code below, an error is triggered: The error "Property 'myCustomID' does not exist on type '(latlng: LatLngExpression, options?: MarkerOptions) ...

angulartypescriptleafletangular-leaflet-directiveleaflet.markercluster

Exploring Data in Angular 2: Examining Individual Records

I am currently learning Angular and facing some challenges in structuring my questions regarding what I want to achieve, but here is my query. Within a component, I am retrieving a single user record from a service. My goal is to display this user's ...

javascriptangular

Collection of personalized forms where the parent is a FormGroup

One scenario I'm working on involves creating multiple custom formgroup classes that have FormGroup as their parent class, structured like this: export class CustomFormGroup1 extends FormGroup { //custom properties for this FormGroup const ...

angulartypescriptangular-reactive-forms

Creating a specification for a type that lacks a specific concluding character

When utilizing TypeScript, you have the ability to create template literal types such as: type Paragraph = `${string}\n`; const paragraph: Paragraph = 'foo\n'; // valid const word: Paragraph = 'foo'; // invalid But can you d ...

typescript

Pagination in Angular 2

My current implementation involves using ngx pagination. I have successfully changed the navigation list by passing (pageChange)="p = $event". However, I now want to send the p value to a function like (pageChange)="pageChange(p)" and then set p = $event w ...

angular

Angular 6 - Defining two components with several modules nested within each other

There are two components, C1 and C2. Each component has its own module file. How can I declare C1 in C2 in Angular 6? // Module 1 @NgModule({ imports: [], exports: [], declarations: [ ComponentX, ComponentY ], providers: [] }) // Module 2 @NgModule ...

angular

Tips for refreshing the current page in Angular without being redirected to the login page

Exploring an Angular example for login and registration here on stackblitz Encountering an issue where after refreshing the page, the authguard redirects me to the login page even though I am already logged in. Looking for a solution to redirect to the c ...

node.jsangular

The component has reached the maximum limit of recursive updates

I have been working on a simple fetching function and encountered a warning message: The warning states: Maximum recursive updates exceeded in component. This indicates that a reactive effect is mutating its dependencies, causing it to trigger itself recu ...

typescriptvue.jsvue-componentvuejs3vue-reactivity

Unleashing the power of storytelling with React: A guide to creating dynamic story

weather.stories.ts export default { title: 'Widgets/Forecast', component: Weather, } const Template: Story<any> = (args) => <Weather {...args} />; export const Default = Template.bind({}); Default.args = { forecast: { ...

javascriptreactjstypescriptstorybook

Consolidate various arrays of objects while eliminating duplicate items based on an optional property

Imagine having multiple arrays like these: const arr1 = [ { "id": "1", "type": "sales" }, { "id": "2", "type": "finance" } ] const arr2 = [ { "type": "s ...

node.jstypescriptlodash

Tips for retrieving the body of a response in string format

My project involves an HTTP service that sends requests to the server and receives responses. Sometimes, different errors occur on the server during development which do not always return JSON. In such cases, I need to retrieve the response body as a strin ...

ajaxangularrxjs

Issues Encountered when Installing Angular on a Mac

While attempting to install angular on my MacBook, I encountered some confusing errors. Below is a snippet of the terminal commands I used: S-MacBook-Pro-491:~ s$ node -v v8.9.4 S-MacBook-Pro-491:~ s$ npm -v 5.6.0 S-MacBook-Pro-491:~ s$ npm install -g @a ...

node.jsangularnpm

Unleashing the power of await with fetch in post/get requests

My current code has a functionality that works, but I'm not satisfied with using it. await new Promise(resolve => setTimeout(resolve, 10000)); I want to modify my code so that the second call waits for the result of the first call. If I remove the ...

node.jstypescriptpostasync-awaitfetch

Replace i18next property type in React for language setting

We have decided to implement multilanguage support in our app and encountered an issue with function execution. const someFunction = (lang: string, url: string) => any If we mistakenly execute the function like this: someFunction('/some/url', ...

typescripti18nextreact-i18next

Importing and viewing an Excel spreadsheet containing images in a specific column

I am currently working on an Angular project where I am implementing a feature to upload an excel file. The excel file contains text data in one column, and another column specifically contains images labeled as D1, D2, D3, and so on. While attempting to ...

phpmysqlangularexcelimage