Question

我正在使用angular2.0作为我的应用程序

我使用npm install angulartics2 --save安装了angulartics2并将其导入app模块。每件事都很好。后来，我使用延迟加载一个模块，现在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

Answer 1

将angularitics更新为1.6.1后问题解决了

在angular2延迟加载中使用angularitics时出错

1 个答案: