如何将电子添加到使用 angular/cli 制作的 Angular 项目中？答案

【问题标题】：How to add electron to angular project made with angular/cli?如何将电子添加到使用 angular/cli 制作的 Angular 项目中？
【发布时间】：2017-08-28 17:22:00
【问题描述】：

我的项目结构如下：

我正在尝试将电子添加到通过 angular/cli 制作的具有特定结构的项目中。但是，当我尝试运行“npm start”时，我得到“无法找到电子应用程序”。我应该从 src 修改 main.ts 吗？目前它看起来像：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

它是标准的，没有修改。

【问题讨论】：

标签： angular electron angular-cli

【解决方案1】：

我也只是在学习电子。以下设置对我有用：

步骤 1) 在 src 目录下创建一个电子目录，其中包含一个 package.json 和一个 main.js（参见https://electron.atom.io/docs/tutorial/quick-start/）

步骤 2) 全局安装电子：

npm install -g electron

步骤 3) 更新 package.json（向脚本部分添加 2 个条目）：

...
"build-electron": "ng build --base-href . && copy src\\electron\\* dist",
"electron": "npm run build-electron && electron dist",
...

步骤 4) 启动应用程序：

npm run electron

希望，它会有所帮助。

【讨论】：

感谢它的工作。我使用这个脚本使它在 osx 上工作。 "build-electron": "ng build --base-href . && cp src/electron/* dist",
不应该是 && cp -R src/electron/* dist

【解决方案2】：

您的 package.json 需要修改。确保将 "main": "main.js" 添加到您的 package.json。

例如：

{
  "name": "package-name",
  "version": "0.0.0",
  "main": "main.js",
  ...
}

【讨论】：