'bundle.rxjs' fails and npm start hangs when spaces in path to node_modules - analysis and workarounds

[dchennells]

*** Bug report, work-up, viable workarounds/hacks and proposed resolutions ***

Current behavior
When there are spaces in the file path to the node_modules folder, the following failure occurs for npm install:
[05:58:53] Starting 'bundle.rxjs'...
[05:58:55] Finished 'bundle.rxjs' after 1.84 s
Unhandled rejection Error on fetch for rxjs/index at file:///E:/GH/Angular%20Templates/angular-seed/node_modules/rxjs/index.js
Error: ENOENT: no such file or directory, open 'E:\GH\Angular%20Templates\angular-seed\node_modules\rxjs\index.js'

This results in npm start hanging with the following error logged to the browser developer console:
:5555/node_modules/.tmp/Rx.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

This error correlates with the absence of the following folder and contents in node-modules after running npm install and at the time of running npm start:
Folder: .tmp
Contents: Rx.min.js; Rx.min.js.map

Expected behavior
npm install, start should run without errors or hanging

Minimal reproduction of the problem with instructions

• Prior to running npm install, copy a fresh, cloned angular-seed project folder inside a parent folder that includes one or more spaces in the folder name.
• Run npm install and observe the error noted above
• Run npm start and observe that the page hangs on "Loading" in the browser (and logs a 404 Not Found error to the Dev Console).

What is the motivation / use case for changing the behavior?
Support spaces in paths for Windows dev boxes. Otherwise, you run the risk of blindsiding devs from Windows/.NET backgrounds who haven't had to deal with problems associated with spaces in file paths for centuries. (This is the sort of non-obvious gotcha in the node/angular ecosystem that increases adoption friction.)

Development environment:

• Windows 10 1809
• Angular Seed Version: aaaaf75
• Node: node --version = v10.14.2

Analysis and work-up
The source for the bundle.rxjs build task is contained in \tools\tasks\seed\bundle.rxjs.ts

This task takes a dependency on the (deprecated, as of September 2018) bundler project, systemjs-builder v.0.16.13, which in turn is dependent on systemjs v.0.19.46. The loader employed by these projects adds percent-encoding for spaces in file urls, so that a folder such as the following:

E:/GH/Angular Templates/angular-seed

is encoded in the address and path properties of the loader as:

file:///E:/GH/Angular%20Templates/angular-seed

(For the source code for this transformation see prepareBaseURL and specifically the anonymous method baseURIObj, and in turn the URL class, all in the file systemjs.src.js of the systemjs dependency of systemjs-builder.)

The percent-encoding introduced (i.e. the %20 in lieu of the space) is apparently not supported by systemjs-builder itself nor its dependent version of systemjs when used in conjunction with the node.js fs module on Windows machines. The consumers of the path within systemjs-builder are the node.js fs module methods readFile and stats.

The urls are manipulated in a semi-Windows-sensitive way at the following two code blocks:

systemjs-builder\lib\utils.js

exports.fromFileURL = fromFileURL;
function fromFileURL(url) {
  return url.substr(7 + !!isWin).replace(/\//g, path.sep);
}

systemjs-builder\node_modules\systemjs\dist\system.src.js

    fetchTextFromURL = function(url, authorization, fulfill, reject) {
      if (url.substr(0, 8) != 'file:///')
        throw new Error('Unable to fetch "' + url + '". Only file URLs of the form file:/// allowed running in Node.');
      fs = fs || require('fs');
      if (isWindows) {
        url = url.replace(/\//g, '\\').substr(8);

In both cases the url text operations are missing the additional required manipulation, taking into consideration the (default/employed) behaviour of the node.js fs module:

.replace(/\%20/g, ' ')

Without converting percent-encoded-spaces back to literal spaces, two node.js fs methods called at different junctures in the bundle process throw an error and are unable either to verify file status or to open the file.

User Workarounds/Hacks

• generate the .tmp folder containing the two bundled rxjs files using a copy of angular-seed located at a path that does not contain spaces and then copy this (static) folder into the node_modules folder for the active project that has spaces in the path. Add that operation to the user's custom build script as applicable. Having done that, safely ignore the bundle.rxjs error upon build/install;
• overwrite the source code (or use a fork) for the two functions above by appending the additional url manipulation noted above — .replace(/%20/g, ' ') — to the existing replace operation; or,
• eliminate spaces from the path to the dev folder.

Recommendations for angular-seed

• eliminate the dependency on the deprecated systemjs-builder project to move towards SystemJS 3.0 or a suitable alternative
• ensure that any replacement-bundler project has adequate coverage for its module resolver/loader for the relatively obvious test-case of handling spaces in a path on a windows machine
• (immediately) add a note on the main project readme noting this known issue/limitation
• improve documentation on the tasks readme.md for gulp tasks debugging to enhance the capacity of the community to diagnose build process issues. Note that this relatively serious bug was introduced eight months ago, with the 8c53508 commit, but has not been worked-up until now, as far as I can see, possibly because task debugging for the project is made more daunting by the lack of documented support. (I took this analysis well beyond the point of unblocking my own project, both to take the opportunity to grok gulp debugging within VS Code and to pave the way for a fix.)

You could argue that this issue should be/have been raised with the good folks at systemjs-builder. However, given the status of that project, the larger issues that raises, and the greater capacity of the angular-seed project owner to move that particular mountain if required I'll leave that decision and next steps to him.

Vaguely related prior angular-seed issues

• Should migrate to SystemJS 2.0
• build.bundle.rxjs is failing
• Cannot find module '.tmp/Rx.min.js'

Current user experience