isomorphic-git: Error when launching through angular

Status update:

We’re much closer to working out-of-the-box with Angular 7! (Edit: the same steps apply for Angular 8.) Which is also means were closer to achieving #698.

I was able to get our demo app running locally with only the following modifications:

package.json

...
  "dependencies": {
...
    "buffer": "^5.2.1",
    "path-browserify": "^1.0.0"
  },
...

polyfills.ts

...
(window as any).global = window;
(window as any).process = {};
import { Buffer } from 'buffer';
(window as any).Buffer = Buffer;

tsconfig.json

...
    "lib": [
      "esnext.asynciterable",
...
    ]
...

src/tsconfig.app.json

...
  "compilerOptions": {
...
    "types": ["node"],
    "paths": {
      "path": ["node_modules/path-browserify"]
    }
  }
...

Only these changes are required with Angular 13:

package.json

"dependencies": {
  "buffer": "^6.0.3"
},
...

polyfills.ts

import { Buffer } from 'buffer';
(window as any).Buffer = Buffer;

for angular 8 i had to replace my polyfill.ts with:

(window as any).global.Buffer = (window as any).global.Buffer || require('buffer').Buffer;

instead of this:

import { Buffer } from 'buffer';
(window as any).Buffer = Buffer;

tested on Angular 8 by:

1. importing “node_modules/isomorphic-git/dist/bundle.umd.min.js” in angular.json,
2. declaring

function startGit() {
      $(document).ready(function() {
           BrowserFS.configure({ fs: "IndexedDB", options: {} }, function (err) {
           if (err) return console.log(err);
               window.fs = BrowserFS.BFSRequire("fs");
               git.plugins.set('fs', window.fs);
           });
     })
}

in src/assets/somegitfile.js

1. importing into any controller the following and then call it from anywhere in that controller.

declare function startGit():any`

@wmhilton yes we are doing this for now and it seems to work. Since it’s just the build process that fails, using the library with the pre-built bundle without typings works like a charm !

For the record, if you update tsconfig.app.json with types: ["node"] then you do get passed the Buffer error … and if you delete the corsProxy argument (because apparently I forgot to add that to the TS definitions for getRemoteInfo)… then you finally get to some meaningful errors:

ERROR in ./node_modules/simple-get/index.js
Module not found: Error: Can't resolve 'http' in 'C:\Downloads\angular-pdbaet\node_modules\simple-get'
ERROR in ./node_modules/simple-get/index.js
Module not found: Error: Can't resolve 'https' in 'C:\Downloads\angular-pdbaet\node_modules\simple-get'
ERROR in ./node_modules/globalyzer/src/index.js
Module not found: Error: Can't resolve 'os' in 'C:\Downloads\angular-pdbaet\node_modules\globalyzer\src'
ERROR in ./node_modules/globalyzer/src/index.js
Module not found: Error: Can't resolve 'path' in 'C:\Downloads\angular-pdbaet\node_modules\globalyzer\src'
ERROR in ./node_modules/isomorphic-git/dist/for-future/isomorphic-git/index.js
Module not found: Error: Can't resolve 'path' in 'C:\Downloads\angular-pdbaet\node_modules\isomorphic-git\dist\for-future\isomorphic-git'
ERROR in ./node_modules/isomorphic-git/dist/for-future/isomorphic-git/index.js
Module not found: Error: Can't resolve 'stream' in 'C:\Downloads\angular-pdbaet\node_modules\isomorphic-git\dist\for-future\isomorphic-git'

To me this indicates that the library is relying on five node builtins that are normally shimmed by webpack: ‘http’, ‘https’, ‘os’, ‘path’, and ‘stream’.

The ‘http’ and ‘https’ dependencies will likely go away when I abstract the httpRemoteHelper into its own plugin. ‘os’ is being used by ‘globalyzer’… not sure what for, but it might need to be shimmed. ‘path’ is also used by globalyzer but is easy to shim. And ‘stream’… I shouldn’t be relying on stream, I should be using readable-stream like every good node citizen, I’ll have to check what’s up with that.

So that’s the plan then. Phase out simple-get, replace ‘stream’ with ‘readable-stream’, and probably talk to the author of globalyzer and see if we can make it play ball with Angular 7.