Question

我使用新的Angular CLI生成了一个新的Angular 2项目。现在我不想在浏览器中使用Angular，而是在电子应用程序中使用。因此，我为电子主要过程创建了一个文件，在终端中使用ng build构建我的Angular应用程序后，该应用程序无法正常工作。

电子主要过程文件：

var electron = require("electron");
var {app, BrowserWindow} = electron;

app.on('ready', () => {
    var mainWindow = new BrowserWindow();
    mainWindow.loadURL(`file://${__dirname}/dist/index.html`);
});

DevTools中的错误：

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
index.html:22 Uncaught ReferenceError: System is not defined

我也知道您基本上需要一个Web服务器来运行Angular 2应用程序，我认为我的应用程序不起作用，因为Electron通过file://协议加载应用程序。

但我真的想将Electron与Angular 2结合使用;所以我的问题是，如果这是可能的，如果是这样，我需要如何从cli实用程序修改生成的角度模板。

Answer 1

您也可以更改

<base href="/">

到

<base href="./">

Answer 2

昨天看了一下关于Angular 2路由器的事情，我发现问题是由index.html

中的这一行引起的

<base href="/">

通过用动态设置的基础替换它，一切都按预期工作。

<script>document.write('<base href="' + document.location + '" />');</script>

Answer 3

这个Github项目由＆＃39; maximegris＆＃39;设置使用Angular 5和Electron的环境。

https://github.com/maximegris/angular-electron

事实证明这对我来说是一种救命。希望你也觉得这很有帮助。

Answer 4

从CDN下载angular.js并将其放入您的app文件夹中。然后在你的html文件中使用

<script type="text/javascript" src="angular.js"></script>

与浏览器不同，电子从文件系统中拾取angular.js没有问题。

使用Angular 2 with Electron（Angular CLI）

4 个答案: