pusher_js_1.default is not a constructor in Angular when using ng build --dev --watch or ng serve

Do you want to request a feature or report a bug?

A bug.

This is the same issue described here: https://github.com/angular/angular-cli/issues/9243 but I think it’s an issue with Pusher instead of Angular/ng, but I’m not certain.

What is the current behavior?

In my Angular 4 project, I have a file like so:

import { Pusher } from 'pusher-js';

export class HomeComponent implements OnInit {
    ngOnInit() {
        this.pusher = new Pusher( '1234', { encrypted: true, cluster: 'mt1 '} );
    }
}

When I run the application locally using ng serve then I get this script error in my browser (Chrome 63):

pusher_js_1.default is not a constructor
    at HomeComponent.webpackJsonp.../../../../../src/app/home/home.component.ts.HomeComponent.ngOnInit (home.component.ts:70)
    at checkAndUpdateDirectiveInline (core.es5.js:10843)
    at checkAndUpdateNodeInline (core.es5.js:12341)
    at checkAndUpdateNode (core.es5.js:12284)
    at debugCheckAndUpdateNode (core.es5.js:13141)
    at debugCheckDirectivesFn (core.es5.js:13082)
    at Object.eval [as updateDirectives] (HomeComponent_Host.html:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)
    at checkAndUpdateView (core.es5.js:12251)
    at callViewAction (core.es5.js:12599)

I understand the same happens with ng build --dev --watch but not ng build --dev (without --watch). I’m not currently able to test this just yet.

**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar.

What is the expected behavior?

It should just work.

Which versions of Pusher, and which browsers / OS are affected by this issue? Did this work in previous versions of Pusher? If so, which?

I’m using pusher-js version 4.2.2.

[daiplusplus]

I found this recent StackOverflow thread from someone else having the same issue: https://stackoverflow.com/questions/48115003/how-to-use-pusher-js-within-vs-codes-angular-workflow

Their solution is to use this import instead:

import * as Pusher from 'pusher-js';

I tried it, and it now works. I’m using pusher-js version 4.2.2.

[andyslack]

I am conditionally importing Pusher if the package is installed like this:

const Pusher = await import('pusher-js')
if(Pusher){
    const pusher = new Pusher.default(key, { cluster: 'eu' })
}

Its working fine.