Блог

Я использую angular2.0 для своего приложения

Я установил angulartics2 с помощью npm install angulartics2 —save и импортировал их в модуль приложения. Все работало нормально. Позже я использовал lazyloading для одного модуля, и теперь angulartic2On не работает.Ниже приведен мой код.

//app.module.ts

  `import { Angulartics2 } from 'angulartics2';
    import { Angulartics2GoogleAnalytics } from 'angulartics2/src/providers/angulartics2-google- analytics';
    import { BrowserModule } from '@angular/platform-browser';
    import {CommonModule} from '@angular/common';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { RouterModule } from '@angular/router';
    @NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpModule,
    RouterModule,

    Angulartics2Module.forRoot(),
    AppRouteRoot
    ],
    providers: [
    Angulartics2GoogleAnalytics 
    ],
    bootstrap: [AppComponent]
    })`
  

//app.component.ts

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

import { Angulartics2 } from 'angulartics2';
import { Angulartics2GoogleAnalytics } from 'angulartics2/src/providers/angulartics2-google-analytics';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(angulartics2: Angulartics2, angulartics2GoogleAnalytics:    Angulartics2GoogleAnalytics) {}

 }
  

`
//app.routes.ts

    `import { Routes, RouterModule } from '@angular/router';

    import {ModuleWithProviders} from '@angular/core';

    import {AppComponent} from './app.component';

    export const AppRoutes: Routes = [
    { path: '', component: AppComponent},
    { path: 'about', loadChildren : 'app/about/about.module' },
    ];

    export const AppRouteRoot:ModuleWithProviders = RouterModule.forRoot(AppRoutes, { useHash: true });`
  

//app.component.html

 <h1> {{title}} </h1> <button angulartics2On="click" angularticsEvent="DownloadClick" angularticsCategory="APP">butto
  

n внутри компонента приложения

//about.module.ts `

   // import { Angulartics2Module } from 'angulartics2';
    // import { Angulartics2GoogleAnalytics } from 'angulartics2/src/providers/angulartics2-google-   analytics';
    // import { Angulartics2On } from 'angulartics2/src/core/angulartics2On';
     import { NgModule }       from '@angular/core';
     import { CommonModule } from '@angular/common';
     import { FormsModule} from '@angular/forms';
     import { HttpModule } from '@angular/http';
     import { RouterModule } from '@angular/router';
     import {AboutComponent} from './about.component';

    import {AboutRouting} from './about.routes'

      @NgModule({
         declarations: [

        AboutComponent
    //  ,
    //   Angulartics2On


    ],
    providers: [
        // Angulartics2GoogleAnalytics

    ],
    imports: [
        CommonModule,    

        RouterModule,
        FormsModule,
        HttpModule,

        AboutRouting,
        // Angulartics2Module.forRoot(),
        // Angulartics2On

    ]
     })
       export default class AboutModule { }`
//about.component.ts
` 


 import { Component, OnInit } from '@angular/core';

    @Component({
    selector: 'app-about',
    templateUrl: './about.component.html',
    styleUrls: ['./about.component.css']
    })
    export class AboutComponent implements OnInit {

    constructor() { }

    ngOnInit() {
    }

    } 
    `
  

//about.routes.ts

    import { Routes, RouterModule } from '@angular/router';
        import {ModuleWithProviders} from '@angular/core';
        import {AppComponent} from './app.component';
        export const AppRoutes: Routes = [
        { path: '', component: AppComponent},
        { path: 'about', loadChildren : 'app/about/about.module' },
        ];
        export const AppRouteRoot:ModuleWithProviders = RouterModule.forRoot(AppRoutes, { useHash:   true });
    //about.component.html
    `<p>
      about works!
    </p>
    <button type="button" (click)="fnTrack()" angulartics2On="click" angularticsEvent="DownloadClick"   angularticsCategory="ABOUT">About   Click</button>`
  

//package.json

 "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
     "@angular/platform-browser": "2.0.0",
     "@angular/platform-browser-dynamic": "2.0.0",
     "@angular/router": "3.0.0",
    "angulartics2": "^1.1.9",
    "core-js": "^2.4.1",
    "process-nextick-args": "^1.0.7",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
   "zone.js": "^0.6.23"
  }
  

есть ли какой-нибудь способ включить angulartics2 в отложенной маршрутизации

После обновления angularitics до версии 1.6.1 проблема решена