使用NativeScript插件与NativeScript Angular 2

Question

使用NativeScript插件与NativeScript Angular 2

angularnativescriptangular2-nativescript

3

我是一个新手，对于NS和Angular 2平台不太熟悉。我试图在我的NativeScript Angular 2项目中使用https://github.com/sitefinitysteve/nativescript-google-analytics这个插件。我的整个项目代码如下所示。当我测试我的项目时，会出现“找不到插件”的错误。

我的常见问题是“我可以使用每一个NPM NS模块与NS Angular 2吗？”如果我使用了，我该怎么做呢？

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
    });
  }
}

编辑

我遇到了以下错误：

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)

- Kerberos

如果您使用 tns plugin add nativescript-google-analytics 安装了 Google Analytics，则应该可以正常导入。tns 会将插件安装到 npm。 - Maxim Shoustin

@MaximShoustin 是的，我按照你一开始写的做了。你对我的整个代码方法有什么看法？它正确吗？ - Kerberos

初始化调用应该放在 main.ts 或 main.aot.ts 文件中的 bootstrap 行之前。 - Marek Maszay

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Kerberos

2个回答

0

检查插件使用的节点模块版本，您可以使用nativescript-plugin-firebase来集成该功能。

- Luis Fernando Hernandez

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marek Maszay · Accepted Answer

应该是这样的。

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);