Use steem-js in Angular 4 app

[stephanmullerNL]

I'm trying to start an Angular 4 app using the steem-js api, but I'm running into a problem importing the steem npm package.

Here's my code (it's literally a blank Angular app with an import statement to fetch steem)

import {Component, OnInit} from '@angular/core';
import * as steem from 'steem';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app works!';

  ngOnInit() {
    console.log(steem);
    steem.api.getAccounts(['test', 'test2'], function(err, response){
      console.log(err, response);
    });
  }
}

This results in the following error:

Failed to compile.

./~/steem/lib/api/index.js
Module not found: Error: Can't resolve './methods' in '/Users/Stephan/Dev/kanzeon/node_modules/steem/lib/api'
 @ ./~/steem/lib/api/index.js 17:15-35
 @ ./~/steem/lib/index.js
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

It seems to me that this is because steem-js requires JSON files internally (as stated in the webpack example), but the Angular CLI is set up to exclude json files from the node_modules directory. In addition, Angular CLI hides its webpack configuration and doesn't allow changing/overriding its rules.

I really wouldn't like to try and override it anyway, but with the current setup steem-js and Angular 4 are incompatible.

Can anyone suggest a workaround or fix?

I don't mind creating a pull request here to add Angular 4 compatibility if someone can point me in the general direction of a solution :).

[bonustrack]

Can you try the version 0.6.1? We changed the .json files to .js here #211 to avoid this issue and just released this version.

[stephanmullerNL]

Ha, that's awesome. Thank you!