feat: update angulartics2 to v4.0.0 (#303)

Author: scttcper

package-lock.json

@@ -147,7 +147,7 @@
     "@ngx-meta/core": "^4.0.1",
     "angular2-jwt": "^0.2.3",
     "angularfire2": "^5.0.0-rc.3",
-    "angulartics2": "3.3.0",
+    "angulartics2": "4.0.0",
     "body-parser": "^1.18.2",
     "bunyan-middleware": "^0.8.0",
     "clean-css": "^4.1.9",

package.json

@@ -1,7 +1,7 @@
 <div *ngIf="user$ | async as user" class="flex-center">
   <h2>{{ user.displayName }}</h2>
   <a class="flex-center">
-    <img *ngIf="user.photoURL" [src]="user.photoURL" class="avatar" angulartics2On="mouseover" angularticsEvent="HoveredOverAccountProfileImage">
+    <img *ngIf="user.photoURL" [src]="user.photoURL" class="avatar" angulartics2On="mouseover" angularticsAction="HoveredOverAccountProfileImage">
     <a mat-button>Update Photo</a>
   </a>
   <mat-accordion class="headers-align">
@@ -17,20 +17,20 @@ <h2>{{ user.displayName }}</h2>
       <form [formGroup]="detailForm" (ngSubmit)="updateDetail()">
         <mat-form-field>
           <input matInput formControlName="displayName" [value]="user.displayName" type="text" placeholder="Name" angulartics2On="focus"
-            angularticsEvent="FocusedOnAccountDisplayNameInput">
+            angularticsAction="FocusedOnAccountDisplayNameInput">
         </mat-form-field>
         <mat-form-field>
-          <input matInput formControlName="email" type="email" [value]="user.email" placeholder="Email" angulartics2On="focus" angularticsEvent="FocusedOnAccountEmailInput">
+          <input matInput formControlName="email" type="email" [value]="user.email" placeholder="Email" angulartics2On="focus" angularticsAction="FocusedOnAccountEmailInput">
           <!-- <mat-icon matSuffix [matTooltip]="user.emailTooltip" [color]="user.emailColor" fontSet="fa" [fontIcon]="user.emailIcon" angulartics2On="mouseover"
-                angularticsEvent="HoveredOverAccountEmailCheckmarkIcon"></mat-icon> -->
+                angularticsAction="HoveredOverAccountEmailCheckmarkIcon"></mat-icon> -->
         </mat-form-field>
         <mat-form-field>
           <input matInput formControlName="phoneNumber" type="text" [value]="user.phone || ''" placeholder="Phone" angulartics2On="focus"
-            angularticsEvent="FocusedOnAccountPhonenumberInput">
+            angularticsAction="FocusedOnAccountPhonenumberInput">
         </mat-form-field>
-        <button mat-raised-button type="submit" 
+        <button mat-raised-button type="submit"
         [disabled]="!detailForm.dirty"
-        color="primary" id="update-btn" angulartics2On="input" angulartics2On="click" angularticsEvent="ClickUpdateProfile">Save Changes</button>
+        color="primary" id="update-btn" angulartics2On="input" angulartics2On="click" angularticsAction="ClickUpdateProfile">Save Changes</button>
       </form>
     </mat-expansion-panel>
     <mat-expansion-panel disabled=true #socialPanel>
@@ -83,20 +83,20 @@ <h2>{{ user.displayName }}</h2>
       </mat-expansion-panel-header>
       <form [formGroup]="passForm" (ngSubmit)="updatePassword()">
         <mat-form-field>
-          <input matInput formControlName="currentPassword" type="password" placeholder="Current Password" angulartics2On="focus" angularticsEvent="FocusedOnAccountPasswordChangeInput">
+          <input matInput formControlName="currentPassword" type="password" placeholder="Current Password" angulartics2On="focus" angularticsAction="FocusedOnAccountPasswordChangeInput">
           <mat-error *ngIf="passForm.controls.currentPassword.hasError('required')">
             <strong>required</strong>
           </mat-error>
         </mat-form-field>
         <mat-form-field>
-          <input matInput formControlName="newPassword" type="password" placeholder="New Password" angulartics2On="focus" angularticsEvent="FocusedOnAccountPasswordChangeInput">
+          <input matInput formControlName="newPassword" type="password" placeholder="New Password" angulartics2On="focus" angularticsAction="FocusedOnAccountPasswordChangeInput">
           <mat-error *ngIf="passForm.controls.newPassword.hasError('required')">
             <strong>required</strong>
           </mat-error>
         </mat-form-field>
         <button mat-raised-button [disabled]="passForm.invalid" type="submit" color="primary" id="update-btn" angulartics2On="input"
-          angulartics2On="click" angularticsEvent="ClickUpdateProfile">Save Changes</button>
+          angulartics2On="click" angularticsAction="ClickUpdateProfile">Save Changes</button>
       </form>
     </mat-expansion-panel>
   </mat-accordion>
-</div>
+</div>

src/client/app/+account/account.component.html

@@ -30,7 +30,7 @@ exports[`HomeComponent should compile 1`] = `
       
       <a
         angulartics2on="click"
-        angularticsevent="ViewRepo"
+        angularticsaction="ViewRepo"
         class="mat-raised-button"
         color="primary"
         href="https://github.com/patrickmichalina/fusebox-angular-universal-starter"
@@ -113,5 +113,6 @@ exports[`HomeComponent should compile 1`] = `
     
   
   </mat-card>
+  
 </pm-home>
 `;

src/client/app/+home/__snapshots__/home.component.spec.ts.snap

@@ -3,7 +3,7 @@
     <h1 class="display-3">Hello, Angular Developer!</h1>
     <p class="lead">Welcome to a blazing fast Angular Universal development starter</p>
     <a mat-raised-button color="primary" href="https://github.com/patrickmichalina/fusebox-angular-universal-starter" role="button"
-      angulartics2On="click" angularticsEvent="ViewRepo">
+      angulartics2On="click" angularticsAction="ViewRepo">
       <mat-icon class="fa fa-github" aria-hidden="true"></mat-icon> Github</a>
   </div>
   <mat-tab-group>
@@ -85,4 +85,4 @@ <h1 class="display-3">Hello, Angular Developer!</h1>
       </ul>
     </mat-tab>
   </mat-tab-group>
-</mat-card>
+</mat-card>

src/client/app/+home/home.component.html

@@ -1,6 +1,7 @@
 import { By } from '@angular/platform-browser'
 import { RouterTestingModule } from '@angular/router/testing'
-import { Angulartics2, Angulartics2GoogleAnalytics, Angulartics2Module } from 'angulartics2'
+import { Angulartics2, Angulartics2Module } from 'angulartics2'
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga'
 import { HomeComponent } from './home.component'
 import { async, ComponentFixture, TestBed } from '@angular/core/testing'
 import { Component } from '@angular/core'

src/client/app/+home/home.component.spec.ts

@@ -12,7 +12,8 @@ import { SharedModule } from './shared/shared.module'
 import { EnvConfig } from '../../../tools/config/app.config'
 import { ENV_CONFIG } from './app.config'
 import { EnvironmentService } from './shared/services/environment.service'
-import { Angulartics2GoogleAnalytics, Angulartics2Module } from 'angulartics2'
+import { Angulartics2Module } from 'angulartics2'
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { NavbarService } from './shared/navbar/navbar.service'
 import { MatCardModule } from '@angular/material'

src/client/app/app.component.spec.ts

@@ -8,7 +8,7 @@ import { HttpClient } from '@angular/common/http'
 import { WebSocketService } from './shared/services/web-socket.service'
 import { DOCUMENT, TransferState } from '@angular/platform-browser'
 import { SettingService } from './shared/services/setting.service'
-import { Angulartics2GoogleAnalytics } from 'angulartics2'
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga'
 import { MatIconRegistry, MatSidenav, MatSlideToggle } from '@angular/material'
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'
 import { InjectionService } from './shared/services/injection.service'

src/client/app/app.component.ts

@@ -9,7 +9,8 @@ import { NotFoundModule } from './not-found/not-found.module'
 import { BrowserModule, makeStateKey } from '@angular/platform-browser'
 import { EnvironmentService } from './shared/services/environment.service'
 import { ServerResponseService } from './shared/services/server-response.service'
-import { Angulartics2GoogleAnalytics, Angulartics2Module } from 'angulartics2'
+import { Angulartics2Module } from 'angulartics2'
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga'
 import { HTTP_INTERCEPTORS, HttpClientModule, HttpResponse } from '@angular/common/http'
 import { GlobalErrorHandler } from './shared/services/error-handler.service'
 import { SettingService } from './shared/services/setting.service'

src/client/app/app.module.ts

@@ -8,6 +8,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms'
 import { ServerResponseService } from './../shared/services/server-response.service'
 import { ActivatedRoute, Router } from '@angular/router'
 import { Observable } from 'rxjs/Observable'
+import { filter } from 'rxjs/operators'
 import { SEONode, SEOService } from '../shared/services/seo.service'
 import { MatChipInputEvent, MatDialog, MatSnackBar } from '@angular/material'
 import { ModalConfirmationComponent } from '../shared/modal-confirmation/modal-confirmation.component'
@@ -128,7 +129,7 @@ export class NotFoundComponent {
     .map(a => a.tab ? +a.tab : 0)
 
   private url$ = Observable.of(this.router.url.split('?')[0])
-    .filter(a => !a.includes('.'))
+    .pipe(filter(a => !a.includes('.')))
     .shareReplay()
 
   public settingsForm = new FormGroup({

src/client/app/not-found/not-found.component.ts

@@ -12,7 +12,7 @@ exports[`NavbarComponent should compile 1`] = `
   
     <button
       angulartics2on="click"
-      angularticsevent="ToggleSideMenu"
+      angularticsaction="ToggleSideMenu"
       class="mat-icon-button"
       id="toggle-menu-button"
       mat-icon-button=""
@@ -208,6 +208,8 @@ exports[`NavbarComponent should compile 1`] = `
     
 
   </nav>
+  
+
 </div>
 `;
 
@@ -223,7 +225,7 @@ exports[`NavbarComponent should contain a list of links 1`] = `
   
     <button
       angulartics2on="click"
-      angularticsevent="ToggleSideMenu"
+      angularticsaction="ToggleSideMenu"
       class="mat-icon-button"
       id="toggle-menu-button"
       mat-icon-button=""
@@ -419,5 +421,7 @@ exports[`NavbarComponent should contain a list of links 1`] = `
     
 
   </nav>
+  
+
 </div>
 `;

src/client/app/shared/navbar/__snapshots__/navbar.component.spec.ts.snap

@@ -1,5 +1,5 @@
 <nav class="mat-elevation-z6">
-  <button id="toggle-menu-button" mat-icon-button (click)="onMenuIconClick.next()" angulartics2On="click" angularticsEvent="ToggleSideMenu">
+  <button id="toggle-menu-button" mat-icon-button (click)="onMenuIconClick.next()" angulartics2On="click" angularticsAction="ToggleSideMenu">
     <mat-icon fontSet="fa" fontIcon="fa-bars"></mat-icon>
   </button>
   <a class="nav-button" mat-button routerLink>FB-ANGULAR-UNIVERSAL-STARTER</a>
@@ -32,4 +32,4 @@ <h4>{{ user.email }}</h4>
       </button>
     </div>
   </mat-menu>
-</nav>
+</nav>

src/client/app/shared/navbar/navbar.component.html

@@ -12,7 +12,8 @@ import { EnvironmentService } from './services/environment.service'
 import { COOKIE_HOST_WHITELIST } from './services/http-cookie-interceptor.service'
 import { ENV_CONFIG } from '../app.config'
 import { NavbarService } from './navbar/navbar.service'
-import { Angulartics2GoogleAnalytics, Angulartics2Module } from 'angulartics2'
+import { Angulartics2Module } from 'angulartics2'
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga'
 import { MaterialModule } from './material.module'
 import { ClickOutsideDirective } from './directives/click-outside.directive'
 import { SocialButtonDirective } from './directives/social-button.directive'
@@ -74,7 +75,7 @@ export function loggerConfigFactory(ps: PlatformService, gooogleAnalytics: Angul
     FormsModule,
     ReactiveFormsModule,
     MarkdownToHtmlModule,
-    Angulartics2Module.forChild(),
+    Angulartics2Module,
     FlexLayoutModule
   ],
   exports: [