electron + angular2 loading vendor lib

Question

I created a new angular2 app using the angularCLI (just so you know my directory structure).

Running ng serve puts all my files in the dist folder and runs the hello world app in the browser with no issue.

I'm trying to run the same app in electron, but it is unable to find all the vendor files (including @angular) since it uses the file protocol in a script src:

This

<script src="vendor/es6-shim/es6-shim.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>
<script src="vendor/zone.js/dist/zone.js"></script>

produces this

file:///vendor/es6-shim/es6-shim.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///vendor/reflect-metadata/Reflect.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///vendor/systemjs/dist/system.src.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///vendor/zone.js/dist/zone.js Failed to load resource: net::ERR_FILE_NOT_FOUND

How do you prepend the correct path in the file: protocol that electron uses?

My gulpfile.js:

var gulp = require('gulp'),  
    del = require('del'),
    runSeq = require('run-sequence');

gulp.task('clean-electron', function(){  
    return del('dist/electron-package/**/*', {force: true});
});

gulp.task('copy:electron-manifest', function(){  
   return gulp.src('./package.json')
       .pipe(gulp.dest('./dist/electron-package'))
});

gulp.task('copy:electron-scripts', function(){  
    return gulp.src('./src/electron_main.js')
        .pipe(gulp.dest('./dist/electron-package'));
});

gulp.task('copy:vendor-for-electron', function() {
    return gulp.src('./dist/vendor/**/*')
        .pipe(gulp.dest('./dist/electron-package/vendor'))    
});

gulp.task('copy:spa-for-electron', function(){  
    return gulp.src(["./dist/*.*", "./dist/app/**/*"])
        .pipe(gulp.dest('dist/electron-package'));
});

gulp.task('electron', function(done){  
    return runSeq('clean-electron', ['copy:spa-for-electron', 'copy:vendor-for-electron', 'copy:electron-manifest', 'copy:electron-scripts' ], done);
});

The closest I got was doing this:

my index.html:

<script src="vendor/es6-shim/es6-shim.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>
<script src="vendor/zone.js/dist/zone.js"></script>

<script>
 console.log("In my script tag:");
 var systemConfigPath = 'system-config.js';
 var mainPath = 'main.js';
 if (window.location.protocol == "file:"){
  require(__dirname + '/vendor/es6-shim/es6-shim.js');
  require(__dirname + '/vendor/reflect-metadata/Reflect.js');
  require(__dirname + '/vendor/systemjs/dist/system.src.js');
  require(__dirname + '/vendor/zone.js/dist/zone.js');

  systemConfigPath = __dirname + '/' + systemConfigPath; 
  mainPath = __dirname + '/' + mainPath ;
} 

System.import(systemConfigPath).then(function () {
    System.import(mainPath);
}).catch(console.error.bind(console));

but that still gives me issues as the vendor files reference other files inside the same directories:

Edit:

I am now trying to use webpack to build my electron app (with no success).

I also created a github repo if you would like to see the code.

Community · Accepted Answer · 2017-05-23 12:09:52Z

10

From How should I configure the base href for Angular 2 when using Electron? the answer is to change you

 <base href="/">

to

 <base href="./">

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Jun 2, 2016 at 10:34

DavidC

1,8621 gold badge18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeff Over a year ago

I was just about to post another question on here about my default routing... which wasn't working... Thank you very much!

Jeff · Accepted Answer · 2016-05-27 12:35:27Z

Okay! so I am not sure it's the best answer, as it still produces some silly errors, but here we go...

My index.html now looks like this:

<body>
  <electron-angular-boilerplate-app>Loading...</electron-angular-boilerplate-app>

  <!--will give errors in electron... oh well-->
  <script src="vendor/es6-shim/es6-shim.js"></script>
  <script src="vendor/reflect-metadata/Reflect.js"></script>
  <script src="vendor/systemjs/dist/system.src.js"></script>
  <script src="vendor/zone.js/dist/zone.js"></script>

  <script>
    // if require is defined, we are on node / electron:
    if (!(typeof(require) == "undefined")){
      require('./vendor/es6-shim/es6-shim.js');
      require("./vendor/reflect-metadata/Reflect.js");
      require("./vendor/systemjs/dist/system.src.js");
      require("./vendor/zone.js/dist/zone.js");
      require("./system-config.js");
      require("./main.js");
    } else {
      System.import('system-config.js').then(function () {
        System.import('main');
      }).catch(console.error.bind(console));      
    }

  </script>
</body>

This allows both my angular cli application to run and my electron app to run. The <script src=... tags still produce errors in electron as it is not able to find them. I also had to remove the System.import line from electron, so hopefully that doesn't cause any issues later on.

and to run it, we just need to make sure that the app is built and run electron in the ./dist folder:

ng build && electron ./dist

Here is the branch with my working code:

https://github.com/jdell64/electronAngularBoilerplate/tree/so-37447020-answer

This produces no errors in the web app, but a few "not found" errors in the electron app. If someone finds a better solution, I'll accept that, until then, this will be the solution.

Collectives™ on Stack Overflow

electron + angular2 loading vendor lib

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related