Angular build cannot resolve '../package' and 'child_process'

[tomasklapka]

angular-cli is reporting "Can't resolve" errors when building Angular application which uses solid-client. One of the errors is pointing to this repository and second one points to a XMLHttpRequest - dependency used by rdflib.

Error message

ERROR in ./~/solid-client/lib/meta.js
Module not found: Error: Can't resolve '../package' in '/data2/space/angular-testing/angular-solid-client/node_modules/solid-client/lib'
 @ ./~/solid-client/lib/meta.js 7:10-31
 @ ./~/solid-client/lib/index.js
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./~/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: Error: Can't resolve 'child_process' in '/data2/space/angular-testing/angular-solid-client/node_modules/xmlhttprequest/lib'
 @ ./~/xmlhttprequest/lib/XMLHttpRequest.js 15:12-36
 @ ./~/rdflib/lib/util.js
 @ ./~/rdflib/lib/index.js
 @ ./~/solid-client/lib/util/rdf-parser.js
 @ ./~/solid-client/lib/index.js
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

Information

solid-client: 0.24.3

# ng version
@angular/cli: 1.2.1
node: 8.1.2
os: linux x64
@angular/animations: 4.3.0
@angular/common: 4.3.0
@angular/compiler: 4.3.0
@angular/core: 4.3.0
@angular/forms: 4.3.0
@angular/http: 4.3.0
@angular/platform-browser: 4.3.0
@angular/platform-browser-dynamic: 4.3.0
@angular/router: 4.3.0
@angular/cli: 1.2.1
@angular/compiler-cli: 4.3.0
@angular/language-service: 4.3.0

How to reproduce (assuming angular-cli is properly installed):

create new angular app and enter its directory

ng new angular-solid-client
cd angular-solid-client

install solid-client

npm install --save solid-client

add lib import and usage into file: src/app/app.component.ts

import { Component } from '@angular/core';
import * as SolidClient from 'solid-client'; // import

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

run ng build

Or you can clone my seed repo in tag v0.1.0:

git clone https://github.com/tomasklapka/angular-solid-client-seed test
cd test
git checkout tags/v0.1.0
npm install
ng build

Workaround

'../package' resolve error can be fixed simply by adding ".json" extension to a filename required in node_modules/solid-client/lib/meta.js:7. Change:

var lib = require('../package');

to

var lib = require('../package.json');

'child_process' error is caused by removed package replaced by empty nameholder. This module seems to be required only for synchronous calls but since it is empty it should be safe to just comment 'spawn' require in xmlhttprequest/lib/XMLHttpRequest.js:15. Change:

var spawn = require("child_process").spawn;

so it looks like this

var spawn; // = require("child_process").spawn;

[dmitrizagidulin]

Hi Tomáš,

Part of the issue here is that this is meant to be an isomorphic library (able to be used either in the browser or in Node.js), and so the build step has to substitute node-only libraries for browser equivalents. Basically, you need to add an "ignore" list to whatever build tool you're using, Browserify or Webpack etc. For example, if you're using Webpack, you should add the following items to the externals section:

externals: {
    'xhr2': 'XMLHttpRequest',
    'xmlhttprequest': 'XMLHttpRequest',
    'node-fetch': 'fetch',
    'text-encoding': 'TextEncoder',
    'urlutils': 'URL',
    'webcrypto': 'crypto'
}

[tomasklapka]

I see. Thank you Dmitri.

It's weird that angular-cli does not allow to change webpack's configuration by design (https://github.com/angular/angular-cli/issues/1656).

To change the webpack config it is possible to avoid serving through angular-cli: Run ng eject to get the config file and then use npm run build & npm run start instead of ng serve (see answer https://stackoverflow.com/a/42406194/883894)