将 Angular 2 与 Electron 一起使用（Angular CLI）答案

【问题标题】：Use Angular 2 with Electron (Angular CLI)将 Angular 2 与 Electron 一起使用（Angular CLI）
【发布时间】：2016-11-10 04:16:12
【问题描述】：

我使用新的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`);
});

开发工具中的错误：

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 模板。

【问题讨论】：

第一个搜索结果auth0.com/blog/2015/12/15/…
是的，但我想知道如何修改 Angular CLI 生成的模板。
只需将基本 href 从 href="/" 更改为 href="./" 即可运行应用程序

标签： javascript angular electron

【解决方案1】：

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

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

事实证明，这对我来说是一个救命稻草。希望这对您也有帮助。

【讨论】：

【解决方案2】：

你也可以改

<base href="/">

到

<base href="./">

【讨论】：

【解决方案3】：

昨天看了一些关于Angular 2 Router的东西后，我发现问题是由index.html中的这一行引起的

<base href="/">

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：