将 Angular 2 与电子一起使用（Angular CLI）

Question

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

Electron主进程文件：

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 实用程序生成的 Angular 模板。

Answer 1

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

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

与浏览器不同，Electron 从您的文件系统中获取 angular.js 不会有问题。

Answer 2

昨天看了一些关于 Angular 2 路由器的资料后，我发现问题是由 index.html

中的这一行引起的

<base href="/">

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

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

Answer 3

你也可以改变

<base href="/">

至

<base href="./">

Answer 4

'maximegris' 的这个 Github 项目设置了使用 Angular 5 和 Electron 的环境。

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

事实证明，它是我的救命稻草。希望你也觉得这有帮助。

将 Angular 2 与电子一起使用（Angular CLI）

Use Angular 2 with Electron (Angular CLI)

javascript

electron

angular