Can't import npm package in Angular 4 that requires a json file

Question

I made a fresh install of an Angular 4 project and I'm trying to load the npm package steem in it like this:

app.component.ts

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() {
    steem.api.getAccounts(['test', 'test2'], function(err, response){
      console.log(err, response);
    });
  }
}

However, the following error occurs:

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 caused because the ./methods that it can't resolve is a JSON file. Angular-cli's webpack config does include a json loader (and I've installed the json-loader npm package), but in the loader the line exclude: 'node_modules' is present.

I really wouldn't like to override angular-cli's webpack config with my own (there's a good reason why they hide its implementation, it's configured very efficiently) but this does pose a problem for my app.

Is there a way to make sure I can include the steem npm package and have it load its json file without overriding the webpack config?

Answer 1

steem-js requires JSON files internally, so you need JSON loader configured

https://github.com/steemit/steem-js/tree/master/examples/webpack-example

So I'm afraid you'll have to extend/override angular-cli's webpack config. Unfortunately it seems Angular doesn't yet provide a way to extend/override their webpack config .

Are hooks a possibility?