Jeff Jeff - 6 months ago 146
AngularJS Question

electron + angular2 loading vendor lib

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:

error

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.

Answer

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
Comments