Hi,
I’m building a dashboard app which uses pubnub to get realtime data. I already have a website running on Angular 2 which does the same…
Now, in angular 2 I can use the Pubnub-Angular2 module to get the data and Update the view. I want to do the same in Ionic, but I’m getting this error (full error at the end of this post): Error in :0:0 caused by: __WEBPACK_IMPORTED_MODULE_1__wrapper__.default is not a constructor
I will now explain in detail what I’ve done:
-
I installed the modules (pubnub and pubnub-angular2)
package.json:"pubnub": "^4.4.0", "pubnub-angular2": "^1.0.0-beta.8"
-
I put the pubnub script inside
src/index.html
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Ionic App</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"> <link rel="manifest" href="manifest.json"> <meta name="theme-color" content="#4e8ef7"> <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.4.0.js"></script> <script src="cordova.js"></script>
- Then in
src/app/app.module.ts
, I imported PubNubAngular and put it by the Providers
import { PubNubAngular } from 'pubnub-angular2'; import { BrowserModule } from '@angular/platform-browser'; import 'rxjs/Rx'; @NgModule({ declarations: [ MyApp, DashboardPage, ProfilePage, TabsPage, LoginPage ], imports: [ IonicModule.forRoot(MyApp), ChartsModule, BrowserModule ], bootstrap: [IonicApp], entryComponents: [ MyApp, DashboardPage, ProfilePage, TabsPage, LoginPage ], providers: [ {provide: ErrorHandler, useClass: IonicErrorHandler}, Storage, ChartService, AuthService, PubNubAngular] }) export class AppModule {}
- and finally inside
src/app/app.component.ts
I add PubNubAngular in the constructor (This is what triggers the error)
import { PubNubAngular } from ‘pubnub-angular2’;
@Component({
templateUrl: ‘app.html’
})
export class MyApp {
constructor(platform: Platform, private menuCtrl: MenuController, private authService: AuthService, private pubnubService: PubNubAngular) {
pubnubService.init({
subscribeKey: ‘sub-xxxxxxxxxxxxxxxxxxxxxxx’
});
}
I also tried putting the constructor in my dashboard page instead of the app.component. But the error is the same.
This is the full error:
Runtime Error
Error in :0:0 caused by: __WEBPACK_IMPORTED_MODULE_1__wrapper__.default is not a constructor
Stack
TypeError: __WEBPACK_IMPORTED_MODULE_1__wrapper__.default is not a constructor
at PubNubAngular.getInstance (http://localhost:8100/build/main.js:113833:37)
at PubNubAngular.init (http://localhost:8100/build/main.js:113814:25)
at new MyApp (http://localhost:8100/build/main.js:102538:28)
at new Wrapper_MyApp (/AppModule/MyApp/wrapper.ngfactory.js:7:18)
at CompiledTemplate.proxyViewClass.View_MyApp_Host0.createInternal (/AppModule/MyApp/host.ngfactory.js:15:21)
at CompiledTemplate.proxyViewClass.AppView.createHostView (http://localhost:8100/build/main.js:99624:21)
at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (http://localhost:8100/build/main.js:99884:52)
at ComponentFactory.create (http://localhost:8100/build/main.js:37046:25)
at ViewContainerRef_.createComponent (http://localhost:8100/build/main.js:55598:45)
at IonicApp.ngOnInit (http://localhost:8100/build/main.js:41033:43)
System
Ionic Framework: ^2.0.0
Ionic Native: 2.2.11
Ionic App Scripts: 1.0.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 7.4.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
I have no clue what’s wrong and I guess it’s something with ionic since this punub module is working fine on my angular 2 website.
Thanks for helping me out!