Menu
Basically, I am receiving the error below when I call the google analytics api for core reporting data. It works on my localhost server but when I try to deploy the app, it fails for me. Please advise on how to import the "gapi" variable in angular2+. Many thanks!
This is how I call it in my angular app.
gapi.auth.authorize(authData, (res:any)=>{})
ERROR in src/app/order/order.component.ts(65,7): error TS2304: Cannot find name 'gapi'. src/app/order/order.component.ts(66,11): error TS2304: Cannot find name 'gapi'. src/app/order/order.component.ts(67,11): error TS2304: Cannot find name 'gapi'. src/app/order/order.component.ts(69,13): error TS2304: Cannot find name 'gapi'. src/app/order/order.component.ts(71,15): error TS2304: Cannot find name 'gapi'. src/app/order/order.component.ts(77,17): error TS2304: Cannot find name 'gapi'.
Below are my codes
gapi.auth.authorize(authData, (res:any)=>{
gapi.client.load('analytics', 'v3').then(function() {
gapi.client.analytics.management.accounts.list().then( (accountResponse:any) =>{
let accountId = accountResponse.result.items[4].id;
gapi.client.analytics.management.webproperties.list({'accountId': accountId})
.then((accountPropertiesResponse:any) => {
gapi.client.analytics.management.profiles.list({
'accountId': accountPropertiesResponse.result.items[0].accountId,
'webPropertyId': accountPropertiesResponse.result.items[0].id,
})
.then((profileIdResponse:any)=>{
gapi.client.analytics.data.ga.get({
'ids': 'ga:' + profileIdResponse.result.items[0].id,
'start-date': sevenDaysAgo,
'end-date': databaseDate,
'metrics': 'ga:sessions',
'dimensions': 'ga:deviceCategory',
}).then((coreReportResponse:any)=>{
mobileNum = coreReportResponse.result.rows[1][1];
desktopNum = coreReportResponse.result.rows[0][1];
tabletNum = coreReportResponse.result.rows[2][1];
visits = coreReportResponse.result.totalsForAllResults['ga:sessions'];
});
});
});
});
});
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ShopifyReport</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="https://apis.google.com/js/client.js?onload=authorize"
async defer></script>
</body>
</html>
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types",
],
"types": ["gapi", "gapi.auth2", "gapi.auth"],
"lib": [
"es2017",
"dom"
]
}
}
551
asked Feb 20 '18 17:02
In index.html, depending what you want, you may need to add the following within the <head></head> tag To use gapi a with Angular, install the type script definitions using NPM. I did already, but it still have this error when I run ng build --prod. So should I import it on my component? Did that already too. Please see post for that as well.
Either do this by providing the reference path directly to the file with the type description. (From Jack's answer in the linked post above) You will have to add this reference to every ts file that contains a reference to gapi.
In tsconfig.json or tsconfig.app.json within compilerOptions section add this "gapi", "gapi.auth2" to types. It will look like
Added the following code to the component and allowed access from Google Analytics for deploy link. Thank you all!
declare var gapi : any;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With