The Angulartics2GoogleAnalytics type does not have the property 'startTracking' in its definition

I have carefully followed the instructions provided in the readme file of https://github.com/angulartics/angulartics2, but I encountered the following error:

ERROR in src/app/app.component.ts(21,33): error TS2339: Property 'startTracking' does not exist on type 'Angulartics2GoogleAnalytics'.

I suspect that there may be issues with the versions of my dependencies. A similar thread (Angulartics2: startTracking() does not exist on type 'Angulartics2GoogleAnalytics') recommends having "rxjs": "6.0.0" and a TypeScript version higher than 2.6. However, the problem persists despite making these changes.

Any suggestions or insights on this matter would be greatly appreciated!

Here is my package.json:


    {
      "name": "flow-app",
      "version": "1.1.0",
      "license": "MIT",
      ...
      (remaining content remains same)
    }
angulartypescriptangulartics2

Answer №1

After some troubleshooting, it became clear that I needed to upgrade Angular to version 6.x.x in order to properly use rxjs 6.x.x. This also meant updating angulartics2 to the latest version. Here is my updated package.json file:

{
  "name": "flow-app",
  "version": "1.1.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:preprod": "ng build --prod --source-map --configuration=preprod --base-href /dist/",
    "build:prod": "ng build --prod --build-optimizer --configuration=production --base-href /dist/"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.0.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.0.0",
    "@angular/material": "^6.2.5",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.7",
    "ajv": "^6.10.0",
    "angulartics2": "^7.0.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "ng2-opd-popup": "^1.1.21",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.4.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.4",
    "@angular/cli": "^6.2.3",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "^2.9.2"
  }
}

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

Dealing with errors in RxJs when there is a nested request in a map function

When using my login service, I encounter an issue with error handling and request sequencing. Here is the current implementation: // LoginComponent this.authService.loginDb(credentials) .subscribe(() => { this.router.navigate(['/da ...

angularrxjsrxjs5

When a specific checkbox with [(ngModel)] in Angular 4 is selected, all other checkboxes are automatically selected

When I click "NEXT", the value of 'n' increments by 1, starting at 0 by default. This retrieves objects in sequence. statement 1: ============ #let option of question[0].options Let's assume that "option" contains the options for the fir ...

angularcheckbox

Is it possible to evaluate a conditional in Angular after retrieving values from a subscription in an observable?

Objective: Verify conditional statement after retrieving data from an array Attempts Made: I explored various articles on SO with similar queries, but they didn't quite match my situation. I need to ensure that the entire Array is populated before ev ...

angulartypescriptobservable

The Angular NGRX action payload seems to undergo modifications between dispatching and execution

Angular v10, NGRX v10 I am facing a perplexing issue with my Plan object and Task properties using Angular v10 and NGRX v10. Despite making updates to Task properties within my TaskService by deep cloning the Plan object and dispatching an Action to updat ...

angulartypescriptngrx

Ways to modify Angular pipe without specifying data types

I am in the process of extracting an Angular pipe from an application to a library. The current pipe is tied to specific types, but I want to change it to use generic types while maintaining type safety. Original Pipe: import { Pipe, PipeTransform } fr ...

javascriptangulartypescript

Using TypeScript to access global variables from inside a method

Hi everyone, I'm trying to figure out how to access variables from the global scope (this) within 2 methods. Any help would be greatly appreciated. location: any; doSomethingOne() { Geolocation.getCurrentPosition().then((resp) => { ...

typescriptecmascript-6ionic2

What are the best ways to utilize @types/bootbox and @types/jquery?

Is there a way to incorporate @types/bootbox and @types/jquery into an Angular 4 project? I attempted the following: npm install @types/bootbox and in my code, I am implementing it like so: import * as bootbox from 'bootbox'. However, I encou ...

angulartypescript

Issue with clearing subscription upon navigating to another page is not functioning as expected

Currently, I am working on building a basic search screen to gain a better understanding of Angular subscriptions, which I have found to be quite perplexing. On my home page, I have set up two components - one for filtering and the other for displaying sea ...

angularrxjsobservablesubscription

The HttpInterceptor class does not properly handle the result of an HttpErrorResponse, leading to issues with returning the request

I'm facing an issue where I need to refresh my token, but the HttpErrorResponse is not returning the result of the request. When I try to access , I receive a response that says {"token_error":"token_expired"} when my token has expired. However, in t ...

angularangular-http-interceptors

I'm having trouble getting my PrimeNG Calendar component to line up correctly

::ng-deep p-calendar.calendar-control > span > input.p-inputtext { border: 1px solid black; background: #eeeeee; text-align: center !important; } The content is not properly centered. <p-calendar dateFormat="mm/dd/yy&qu ...

cssangularprimengng-deep

Steps to set a new default page in asp.net boilerplate and Angular

I recently developed a fresh project using the asp.net boilerplate, which includes the default landing page as the login page. Now I’m wondering if there’s a way to create a new component and make it the new default landing page instead of the standa ...

angularasp.net-boilerplate

"Integrating FullCalendar with Cloud Firestore for seamless data management

Is It Possible to Integrate Observable with FullCalendar? I have a collection in Cloud Firestore and I want to display the data from this collection in real-time on FullCalendar. Although I know that using an Observable is necessary for this task, it see ...

htmlangularfirebasefullcalendargoogle-cloud-firestore

Ionic 2's NavParams Feature

I've been attempting to transfer a specific data from one page to another using NavParams, however, I'm consistently receiving an 'undefined' result in the console. I'm struggling to identify what the issue might be. Here is the sn ...

javascriptangularionic2navparams

When we employ AOT and JIT, we operate in the present moment

I've reviewed the definitions of AOT and JIT, but I'm still unsure about when to use each method in real-world scenarios. ...

javascriptnode.jsangulartypescriptecmascript-6

Customizing Carousel Arrows in Angular with ng-bootstrap

I need help changing the position and icon of control arrows using Bootstrap. I've tried targeting "carousel-control-prev-icon" & "carousel-control-next-icon", but nothing seems to work. Any suggestions on how to properly solve this issue? Here is th ...

htmlcssangulartypescriptng-bootstrap

Error message in TypeScript: A dynamic property name must be a valid type such as 'string', 'number', 'symbol', or 'any'

Attempting to utilize the computer property name feature in my TypeScript code: import {camelCase} from "lodash"; const camelizeKeys = (obj:any):any => { if (Array.isArray(obj)) { return obj.map(v => camelizeKeys(v)); } else if (ob ...

javascripttypescript

Learn how to automatically display a modal upon loading a webpage by simply entering the URL of the specific template

Is there a way to trigger the modal pop-up by simply typing a URL link without the need for any click function? I am currently attempting to display the modal without requiring a login, but when I type the URL, the modal appears briefly and then disappears ...

angulartwitter-bootstraptypescript

Encountering difficulty utilizing Partial with a generic type

I'm currently working on developing a class called Map that will store mappings set by other classes, such as CharacterManager. I want the content of the map to be determined by other classes, so I have designed the Map class to accept a generic typ ...

typescripttypescript-generics

core.mjs:6484 ALERT There was an issue with reading the 'name' property as it was undefined

I'm encountering an error message in the console.log that I can't seem to resolve... Here is the error message: core.mjs:6484 ERROR TypeError: Cannot read properties of undefined (reading 'name') https://i.stack.imgur.com/tlun6.png H ...

angular

Type 'ɵɵComponentDeclaration' must be provided with at least 7 but no more than 8 type arguments

Recently, in my project, I encountered an issue with the ng-particles v3.5.3 library on my login and sign-in pages. The problem arose suddenly and was displayed in my terminal as follows: Error: node_modules/ng-particles/lib/ng-particles.component.d.ts:18: ...

angularnpmyarnpkg