Adding dependencies for electron help

[mikezoss]

I'm submitting a ...

[X] bug report

Current behavior I'm following these guides:

• https://github.com/NathanWalker/angular-seed-advanced/issues/352
• https://github.com/NathanWalker/angular-seed-advanced/issues/258

Expected behavior I need "glob.js" (https://github.com/isaacs/node-glob) in my home.component.ts for electron. I'm on Windows 10 x64 and everytime the task (npm run start.livesync.desktop.windows) copy node_modules in dist>dev but it doesn't work. Can you try and fix this bug?

An extract of my project.config.ts:

...

    // Add `NPM` third-party libraries to be injected/bundled.
    this.NPM_DEPENDENCIES = [
      ...this.NPM_DEPENDENCIES,
      // {src: 'jquery/dist/jquery.min.js', inject: 'libs'},
    ];

    // Add `local` third-party libraries to be injected/bundled.
    this.APP_ASSETS = [
      ...this.APP_ASSETS,
      // {src: `${this.APP_SRC}/your-path-to-lib/libs/jquery-ui.js`, inject: true, vendor: false}
      // {src: `${this.CSS_SRC}/path-to-lib/test-lib.css`, inject: true, vendor: false},
    ];

    // Add packages (e.g. ng2-translate)
    // ng2-translate is already added with the advanced seed - here for example only
    let additionalPackages: ExtendPackages[] = [
      {
        name: 'electron',
        path: `${this.APP_BASE}node_modules/electron/index.js`
      },
      {
        name: 'gojs',
        path: `${this.APP_BASE}node_modules/gojs/release/go.js`
      },
      {
        name: 'glob',
        path: 'node_modules/glob/glob.js'
      }
    ];

    this.DESKTOP_PACKAGES = [
      ...this.DESKTOP_PACKAGES,
      ...additionalPackages,
    ];

    this.addPackagesBundles(additionalPackages);

    /* Add to or override NPM module configurations: */
    // this.mergeObject(this.PLUGIN_CONFIGS['browser-sync'], { ghostMode: false });

    // if (this.TARGET_DESKTOP) {
    this.SYSTEM_CONFIG_DEV.map = {
      fs: '@node/fs',
      path: '@node/path'
    };
    // }
  }
...

As you can see I'm already using fs and path from Node and electron. Is this necessary in my project.config.ts?

I'm on Windows 10 x64, NodeJS 7.7.3, NPM 4.4.1.

Angular Seed Version: efb2fce

[Kaffiend]

see here. As long as you declare glob in additional packages it should copy the lib to the dev dest when the libs task runs. is the directory not there or is it not getting injected with the correct path?

[mikezoss]

Dear @Kaffiend, thanks for the answer. The task is copying fine the files in node_modules, but then glob requires other dependencies...

This is the first error in electron:

zone.js?1489683224378:1645 GET file:///C:/Users/project/dist/dev/node_modules/fs.realpath.js net::ERR_FILE_NOT_FOUNDscheduleTask @ zone.js?1489683224378:1645ZoneDelegate.scheduleTask @ zone.js?1489683224378:255Zone.scheduleMacroTask @ zone.js?1489683224378:168(anonymous function) @ zone.js?1489683224378:1669send @ VM105:3fetchTextFromURL @ system.src.js?1489683224374:1051(anonymous function) @ system.src.js?1489683224374:1778ZoneAwarePromise @ zone.js?1489683224378:536(anonymous function) @ system.src.js?1489683224374:1777(anonymous function) @ system.src.js?1489683224374:2802(anonymous function) @ system.src.js?1489683224374:3380(anonymous function) @ system.src.js?1489683224374:3694(anonymous function) @ system.src.js?1489683224374:4086(anonymous function) @ system.src.js?1489683224374:4549(anonymous function) @ system.src.js?1489683224374:4819(anonymous function) @ system.src.js?1489683224374:407ZoneDelegate.invoke @ zone.js?1489683224378:242Zone.run @ zone.js?1489683224378:113(anonymous function) @ zone.js?1489683224378:520ZoneDelegate.invokeTask @ zone.js?1489683224378:275Zone.runTask @ zone.js?1489683224378:151drainMicroTaskQueue @ zone.js?1489683224378:418
index.html:55 (SystemJS) XHR error loading file:///C:/Users/project/dist/dev/node_modules/fs.realpath.js
    Error: XHR error loading file:///C:/Users/project/dist/dev/node_modules/fs.realpath.js
        at new Error (native)
        at Zone.runTask (file:///C:/Users/project/dist/dev/node_modules/zone.js/dist/zone.js?1489683224378:151:47) [<root> => <root>]
        at XMLHttpRequest.ZoneTask.invoke (file:///C:/Users/project/dist/dev/node_modules/zone.js/dist/zone.js?1489683224378:345:33) [<root>]
    Error loading file:///C:/Users/project/dist/dev/node_modules/fs.realpath.js as "fs.realpath" from file:///C:/Users/project/dist/dev/node_modules/glob/glob.js Not expecting this error? Report it at https://github.com/NathanWalker/angular-seed-advanced/issues

So now I tried to inject fs.realpath like this in project.config.ts:

....
      let additionalPackages: ExtendPackages[] = [
      {
        name: 'electron',
        path: `${this.APP_BASE}node_modules/electron/index.js`
      },
      {
        name: 'gojs',
        path: `${this.APP_BASE}node_modules/gojs/release/go.js`
      },
      {
        name: 'glob',
        path: `${this.APP_BASE}node_modules/glob/glob.js`
      },
      {
        name: 'fs.realpath',
        path: `node_modules/fs.realpath/index.js`
      },
   ...

IT'S INCREDIBLE!!!

And also if I load all the dependencies it doesn't work!!! Other errors! Like this:

util.inherits is not a function

Can we write a definitive HOW TO?!?

[Kaffiend]

seems like its an injection issue at first glance. try giving it a full package meta.

  {
        name: 'fs.reapath',
        packageMeta: {
          main: 'index.js',
          defaultExtension: 'js'
        }
      },

[mikezoss]

It's the same. Now it's searching:

dist/dev/node_modules/minimatch.js

I'm importing it in my home.component.ts like this:

import * as glob from 'glob/glob';

is it correct??

and then I call console.log(glob) in ngOnInit().

HOW TO???

[Kaffiend]

i think you will have to have all the dependencies as well, and make sure they are registered with systemjs.

[thomascayne]

@NathanWalker Same thing here not with glob.js but with custom non-NPM JavaScript libraries. The build copies NPM packages as well as all the .png, .jpg and *.css files but not regular .js files (the copied folders are empty. The folders are being copied.

I'm losing my hair 4 days now for hours upon hours each day. #59, #136 and #258. Following #97 is giving me "module not found.

For example, I'm adding

this.APP_ASSETS = [
      ...this.APP_ASSETS,
      {src: `${this.APP_BASE}/libs/Ribbon.js`, inject: 'libs'}
];

produced nothing. Can anyone help? Thanks

[Kaffiend]

@vanchisel add your dependency here, and it will atleast work around the issue you're having.

[thomascayne]

@Kaffiend Thank you for your suggestion. I put the path of the *.js files. Nothing happened; Not even errors. It seems to be looking for package.json file based on:

export = () => {
  let src = [
    'node_modules/@angular/**/*',
    'node_modules/rxjs/**/*' //<-- looking for node modules
  ];
. . .
  additionalPkgs.forEach((**pkg**) => {
   if (typeof(**pkg.name**) !== 'undefined') {
      src.push(`node_modules/${**pkg.name**}/**/*`); //<-- looking for package.json
    } // . . .

[Kaffiend]

@vanchisel You will have to use the imported config to path out your dependency

[thomascayne]

@Kaffiend It took a while to figure it out. The following works better: https://github.com/NathanWalker/angular-seed-advanced/issues/408#issuecomment-299762460

[rybaczewa]

Is there a way for desktop packages to be included together with their dependencies? Passing every single dependency to DESKTOP_PACKAGES is impossible with bigger packages and all of their dependencies.