Using NativeScript plugin with NativeScript Angular 2

Question

I am newbie NS and Angular 2 platform. I try to use https://github.com/sitefinitysteve/nativescript-google-analytics this plugin in my NativeScript Angular 2 project. My project whole code as below. When I test my project I am giving error as "Plugin not found".

My common question "Can I use every NPM NS module with NS Angular 2?" If I use How can I do that?

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptHttpModule } from "nativescript-angular/http";

import { AppComponent } from "./app.component";
import { CountriesComponent } from "./pages/countries.component";


@NgModule({
    declarations: [AppComponent, CountriesComponent],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule, NativeScriptHttpModule],
    schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

main.ts

import { platformNativeScriptDynamic } from "nativescript-angular/platform";

import { AppModule } from "./app.module";


platformNativeScriptDynamic().bootstrapModule(AppModule);

app.component.ts

   import { Component } from "@angular/core";

    @Component({
      selector: "my-app",
      template: "<countries></countries>"
    })
    export class AppComponent {}

countries.component.ts

import { Component } from "@angular/core";
import { JsonService } from '../services/json.service';
import { AdmobService } from '../services/admob.service';
import { AnalyticsService } from '../services/analytics.service';

@Component({
    selector: "countries",
    templateUrl: "pages/countries.component.html",
    providers: [AdmobService, AnalyticsService]
})
export class CountriesComponent {

    constructor(private _AdmobService: AdmobService, private _AnalyticsService: AnalyticsService) {
               _AdmobService.createBanner();        
    }

    ngOnInit() {
        this. _AnalyticsService.initAnalytics(); 
     }
}

analytics.service.ts

import { Component } from "@angular/core";
import { Injectable } from "@angular/core";
import * as googleAnalytics from 'nativescript-google-analytics';

@Injectable()
export class AnalyticsService {

  public constructor() { }

  public initAnalytics() {
    googleAnalytics.initalize({
      trackingId: 'UA-XXXXXXX-9',
      dispatchInterval: 5,
      logging: true
    });
  }
}

EDITED

I am getting error as bellow

JS: TypeError: Cannot read property 'GoogleAnalytics' of undefined
JS:     at Object.exports.initalize (/data/data/org.nativescript.JLB/files/app/tns_modules/nativescript-google-analytics/index.js:10:51)
JS:     at AppComponent.initAnalytics (/data/data/org.nativescript.JLB/files/app/app.component.js:11:25)
JS:     at AppComponent.ngOnInit (/data/data/org.nativescript.JLB/files/app/app.component.js:8:14)
JS:     at Wrapper_AppComponent.ngDoCheck (/AppModule/AppComponent/wrapper.ngfactory.js:22:53)
JS:     at DebugAppView.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:28:26)
JS:     at DebugAppView.AppView.detectChanges (/data/data/org.nativescript.JLB/files/app/tns_modules/@angular/core/bundles/core.umd.js:9354:18)

if you installed google analytics with tns plugin add nativescript-google-analytics the import should work. tns installs plugin to npm — Maxim Shoustin
– Maxim Shoustin, Commented Dec 28, 2016 at 15:13
@MaximShoustin Yes I do as you wrote at the beginning. What is your opinion for my whole code approach? is it right? — Kerberos
– Kerberos, Commented Dec 28, 2016 at 15:50
initialize calling should be put in main.ts or main.aot.ts file before boostrap line — Marek Maszay
– Marek Maszay, Commented Dec 28, 2016 at 15:58
@MarekMaszay I did'nt put main.ts I am getting typescript syntax error could you give code sample? — Kerberos
– Kerberos, Commented Dec 29, 2016 at 15:57

Marek Maszay · Accepted Answer · 2016-12-30 10:07:52Z

1

It should be like this

import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app.module";
import * as googleAnalytics from 'nativescript-google-analytics';

googleAnalytics.initalize({
  trackingId: 'UA-XXXXXXX-9',
  dispatchInterval: 5,
  logging: true
});

platformNativeScriptDynamic().bootstrapModule(AppModule);

answered Dec 30, 2016 at 10:07

Marek Maszay

1,5571 gold badge9 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kerberos Over a year ago

Hello, I have implement your suggestion into to "main.ts" file. But I am getting error like this "Cannot read property 'GoogleAnalytics' of undefined"

Marek Maszay Over a year ago

Edit so it took similar to this npmjs.com/package/nativescript-google-analytics#typescript And check if you have in sdk installed npmjs.com/package/nativescript-google-analytics#android

Luis Fernando Hernandez · Accepted Answer · 2018-10-07 18:27:16Z

0

Check the node modules version that plugin uses, in any way you can use the nativescript-plugin-firebase that integrates that functionality.

answered Oct 7, 2018 at 18:27

Luis Fernando Hernandez

1141 silver badge11 bronze badges

Collectives™ on Stack Overflow

Using NativeScript plugin with NativeScript Angular 2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related