电子+角度2加载厂商lib

Question

我使用angularCLI创建了一个新的angular2应用程序(只是让你知道我的目录结构).

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

我试图在电子中运行相同的应用程序,但它无法找到所有供应商文件(包括@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仓库.

Answer 1

从使用Electron时如何配置Angular 2的基本href？答案是改变你

 <base href="/">

至

 <base href="./">