angulartics2: angulartics angulartics2On directive not working with loadChildren routes in angular2.0

I am using angular2.0 for my application

I installed angulartics2 using npm install angulartics2 --save and imported them in the app module. Every thing worked fine. Later, I used lazyloading for one module and now angulartic2On is not working.Following is my code.

//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

`

{{title}}

<button angulartics2On="click" angularticsEvent="DownloadClick" angularticsCategory="APP">button inside app component</button> <router-outlet></router-outlet>`

//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"
  }

...`

is there any way to enable angulartics2 in lazy Routing

Thanks in advance

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 2
  • Comments: 30

Commits related to this issue

Most upvoted comments

I am facing the same issue.

Please test this with latest release v1.5.0