electron + angular2 加载供应商库答案

【问题标题】：electron + angular2 loading vendor libelectron + angular2 加载供应商库
【发布时间】：2016-09-23 15:23:30
【问题描述】：

我使用 angularCLI 创建了一个新的 angular2 应用程序（只是为了让你知道我的目录结构）。

运行ng serve 将我所有的文件放在dist 文件夹中，并在浏览器中运行hello world 应用程序没有问题。

我正在尝试在 electron 中运行相同的应用程序，但它无法找到所有供应商文件（包括 @angular），因为它在脚本 src 中使用了文件协议：

这个

<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>

产生这个

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

如何在电子使用的file: 协议中添加正确的路径？

我的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);
});

我得到的最接近的是这样做：

我的 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));

但这仍然给我带来了问题，因为供应商文件引用了同一目录中的其他文件：

编辑：

我现在正在尝试使用 webpack 来构建我的电子应用程序（没有成功）。

如果您想查看代码，我还创建了github repo。

【问题讨论】：

标签： angularjs angular webpack electron

【解决方案1】：

来自How should I configure the base href for Angular 2 when using Electron?的答案是改变你

 <base href="/">

到

 <base href="./">

【讨论】：

我正要在这里发布另一个关于我的默认路由的问题...这不起作用...非常感谢！

【解决方案2】：

好的！所以我不确定这是不是最好的答案，因为它仍然会产生一些愚蠢的错误，但是我们开始......

我的index.html 现在看起来像这样：

<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>

这允许我的 Angular cli 应用程序和我的电子应用程序运行。 <script src=... 标签仍然会在电子中产生错误，因为它无法找到它们。我还必须从电子中删除System.import 行，所以希望以后不会引起任何问题。

要运行它，我们只需要确保应用程序已构建并在./dist 文件夹中运行电子：

ng build && electron ./dist

这是我的工作代码的分支：

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

【讨论】：

这不会在 web 应用程序中产生错误，但会在电子应用程序中产生一些“未找到”错误。如果有人找到更好的解决方案，我会接受，在那之前，这将是解决方案。