/**
* provider/tracker.ts
*/
import { Injectable } from '@angular/core';
import { CONFIG } from './config';
import { Tracker } from './module/tracker.js' // es6 file with sibling tracker.d.ts
import { UserProvider } from './provider/user';
export { Tracker };
@Injectable()
export Class _Tracker extends Tracker {
constructor(user: UserProvider) {
super(CONFIG);
}
trackEvent(data) {
// do something with data
super.trackEvent(data);
}
}
export const TRACKER_PROVIDER = {
provide: Tracker,
useClass: _Tracker,
deps: [UserProvider]
}
/**
* app.module.ts
*/
import { NgModule } from '@angular/core';
import { MyApp } from './app.component.ts';
import { TRACKER_PROVIDER } from './provider/tracker.ts';
@NgModule({
declarations: [ MyApp ]
providers: [ TRACKER_PROVIDER ],
// and other things
})
export class AppModule {}
/**
* app.component.ts
*/
import { Component } from '@angular/core';
import { Tracker } from './provider/tracker';
import { MyPage } from './pages/myPage.ts'
@Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class WavApp {
rootPage = MyPage;
constructor(
public tracker: Tracker
) {
this.tracker.init();
}
}
/**
* pages/myPage.ts
*/
import { Component } from '@angular/core';
import { Tracker } from './provider/tracker';
@Component({
template: `<div>My Page</div>`
})
export class MyPage {
constructor(
public tracker: Tracker
) {}
ionViewDidLoad() {
console.log(this.tracker.trackEvent);
// LOG:
// trackEvent(data) {
// // do something with data
// super.trackEvent(data);
// }
this.tracker.trackEvent({ eventName: 'WavApp' });
// THROW:
// MyPage ionViewDidLoad error: Cannot read property 'trackView' of undefined
}
}
With this script, when i load my app ionic serve -l
i can see the error throw in console. It’s the only page in the entire app who throw it, and it’s the rootpage, at initialization.
Where do i messed up?
By the way, since Tracker
is an es6 module i put target: es6
in tsconfig.json
, is there a way to put es5
and force the compilation of the es6 module before webpack compact the main.js?