Error when using Pubnub angular2 module in Ionic 2

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:

  1. I installed the modules (pubnub and pubnub-angular2)
    package.json:

    "pubnub": "^4.4.0",
    "pubnub-angular2": "^1.0.0-beta.8"
    
  2. 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>
  1. 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 {}
  1. 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! :slight_smile:

I’m not completely clear on the magical algorithm Webpack uses to find things, but it is possible you will need to try holding its hand here a bit. One thing you could try is to follow the instructions in this post to get a custom webpack configuration and try adding the following to it:

alias: {
  "pubnub-angular2": "pubnub-angular2/dist/pubnub-angular2.js"
}

Hi, thank you for your reply. I tried it but the error is still the same.

So I copied webpack.config.js to the root of my app and added the alias:

 resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')],
    alias: { "pubnub-angular2": "pubnub-angular2/dist/pubnub-angular2.js" }
  },

then in the package.json I added "ionic_webpack": "./webpack.config.js" under “scripts”

Then I both tried ionic serve again and npm run build but the error is still the same. Did I do something wrong?

I don’t understand what’s going on; Why would webpack skip the pubnub module? Shouldn’t it just take all modules inside “node_modules”? And if it does, do I still need to include script tags inside the index.html (for pubnub or other modules)?

No, it’s much more complicated than that. It tracks all your imports and picks up only the code that you are referencing from your application. So it has to know that “pubnub-angular2” means that particular file. Ordinarily that just works, but there are some modules that name their bundles unusual things, and you have to point webpack to the right place. I thought there was a chance that was what was happening to you, but it looks like I was wrong. Sorry for wasting your time and effort.

The pubnub team updated their module and it now works fine in Ionic 2. :smile: