Opossum with Angular 5

[DavideCarvalho]

Node.js Version:
8.9.3

Operating System:
Windows 10

Steps to Produce Error:
I created an Angular application with Angular-cli and added opossum in it.
Then, tried to make a http request with opossum to https://jsonplaceholder.typicode.com/, copied and pasted the code on readme into my application, but it throws me this error:

ERROR TypeError: opossum_1.default is not a function
    at AppComponent.ngOnInit (app.component.ts:28)
    at checkAndUpdateDirectiveInline (core.js:12411)
    at checkAndUpdateNodeInline (core.js:13935)
    at checkAndUpdateNode (core.js:13878)
    at debugCheckAndUpdateNode (core.js:14771)
    at debugCheckDirectivesFn (core.js:14712)
    at Object.eval [as updateDirectives] (AppComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
    at checkAndUpdateView (core.js:13844)
    at callWithDebugContext (core.js:15098)

I'll paste the code below

export class AppComponent implements OnInit {
  title = 'app';

  private async makeRequest () {
    return await this.http.get(`https://jsonplaceholder.typicode.com/posts/1`).toPromise();
  }

  constructor(private http: HttpClient) {}

  ngOnInit() {
    const route = 'https://jsonplaceholder.typicode.com/posts/1';
    const circuitBreakerOptions = {
      timeout: 500,
      maxFailures: 3,
      resetTimeout: 5000
    };
    const circuit = circuitBreaker(this.makeRequest, circuitBreakerOptions);
    circuit.fallback(() => `unavailable right now. Try later.`);
    circuit.on('success', (result) => JSON.stringify(result));
    circuit.fire().catch((e) => console.error(e));
  }
}

[DavideCarvalho]

Tried taking off async and toPromise() from makeRequest, but still outputs the same error

export class AppComponent implements OnInit {
  title = 'app';

  private makeRequest () {
    return this.http.get(`https://jsonplaceholder.typicode.com/posts/1`);
  }

  constructor(private http: HttpClient) {}

  ngOnInit() {
    const route = 'https://jsonplaceholder.typicode.com/posts/1';
    const circuitBreakerOptions = {
      timeout: 500,
      maxFailures: 3,
      resetTimeout: 5000
    };
    const circuit = circuitBreaker(this.makeRequest, circuitBreakerOptions);
    circuit.fallback(() => `unavailable right now. Try later.`);
    circuit.on('success', (result) => JSON.stringify(result));
    circuit.fire().catch((e) => console.error(e));
  }
}

[DavideCarvalho]

So i thought that since Angular http module returns an Observable and not a Promise, I added axios to the project. Still gives me the error, tho

export class AppComponent implements OnInit {
  title = 'app';

  constructor(private http: HttpClient) {}

  private makeRequest(): Promise<any> {
    return this.http.get(`https://jsonplaceholder.typicode.com/posts/1`).toPromise();
  }

  ngOnInit() {
    this.makeRequest()
    .then((data) => {
      console.log(data);
    });
    const circuitBreakerOptions = {};
    const circuit = circuitBreaker(() => axios.get(`https://jsonplaceholder.typicode.com/posts/1`), circuitBreakerOptions);
    circuit.fallback(() => `unavailable right now. Try later.`);
    circuit
      .fire()
      .then(data => console.log(data))
      .catch((e) => console.error(e));
  }
}

So I tried to put the code on another enviroment. Copied and pasted the code on a repl and it worked!
Since i'm at work right now, the network is blocking repl.it from saving the code, but i'll paste it here
the site is: https://repl.it

let opossum = require('opossum');
let axios = require('axios');
const makeRequest = () => {
	return axios.get(`https://jsonplaceholder.typicode.com/posts/1`);
};

// axios.get(`https://jsonplaceholder.typicode.com/posts/1`)
// .then(data => console.log(data))
// .catch(error => console.error(error))

const circuitBreakerOptions = {};
const circuit = circuitBreaker(
	() => axios.get(`https://jsonplaceholder.typicode.com/posts/1`),
	circuitBreakerOptions
);
circuit.fallback(() => `unavailable right now. Try later.`);
circuit.fire().then(data => console.log(data)).catch(e => console.error(e));

[lance]

This looks like it could be a transpilation issue with TypeScript. Would it be possible for you to provide a small piece of code that would allow me to reproduce the error locally?

[DavideCarvalho]

Here's the repo with the code I was trying to run:
https://github.com/DavideCarvalho/angular-opossum-issue

[lance]

I've reproduced this, and it's definitely something going on between the typescript compilation and webpack-ing. But I can't quite figure out what it is.

I'm not very familiar with Angular, but it seems that using the window object is frowned upon. You can see here where opossum sets the circuitBreaker object in either the global window object or in module.exports. I can see in the browser console, that window.circuitBreaker exists and is a function. But I don't understand Angular and how it works well enough to know why it's not being assigned in the import statement.

[lance]

@DavideCarvalho I have pushed a branch which I believe addresses your issues. Can you please test against https://github.com/bucharest-gold/opossum/tree/182-fix-browser-for-angular? If this works for you, I will merge and push a new release.

[DavideCarvalho]

Okay, I’l test it when I get home. Thank you for everything

[DavideCarvalho]

Hello lance, sorry for the wait. I've managed to test the branch right now and worked like a charm!

[lance]

@DavideCarvalho good news. I have a couple of other tasks to take care of, and then I will spin a new release.

[lance]

@DavideCarvalho I have merged the pull request and published 1.5.0. Enjoy!