如何使用 angular cli 以 angular 2 導入 Electron

Question

我正在嘗試使用 Angular 2（使用最新的基於 webpack 的 angular cli 配置）為 gui 制作一個 Electron 應用程序原型，但是我被卡住了，因為我不知道如何在我的 angular2 組件中導入 Electron api。 具體來說，我希望能夠通過單擊 ui 中的按鈕打開一個新的 BrowserWindow ......所以：

<button type="button" (click)="openNewWindow()">
    open
</button>

在我的組件中：

openNewWindow() {
      let appWindow = new BrowserWindow({width: 800, height: 600});
      appWindow.loadUrl('http://www.google.com');
  }

但是...我怎樣才能導入 BrowserWindow？！

通過使用：

import { BrowserWindow } from 'electron';

我得到一個“無模塊錯誤”並按照這個問題的答案： Webpack找不到模塊'電子'我得到：

syntax error near unexpected token ( var electron = require('./')

我該怎么辦？

附： 通過運行“ electron .沒有BrowserWindow導入應用程序正常工作

Answer 1

運行命令npm install electron @types/electron然后使用正常導入

import { ipcRenderer } from 'electron' 。

如果遇到任何問題，嘗試運行npm eject ，會生成一個 webpack.config.js，在 module.exports 頂部添加 "target": "electron-renderer"

Answer 2

在 index.html 中設置

<script>
var electron=require("electron");
</script>

在typings.d.ts 文件中添加這一行

declare var electron: any;

像這個例子一樣在組件內部使用：

const {ipcRenderer, clipboard} = electron;
clipboard.writeText('Electron is ready!!');

Answer 3

我嘗試使用 angular-cli 和 Electron，但無法讓它們協同工作。 這就是我開始以下項目的原因： https : //github.com/osechet/angular-tour-of-heroes-webpack它將 Angular 2 與 webpack 和 Electron 集成在一起。 它基於 Angular 2 教程（帶有單元測試）。 在開發模式（ npm run start.desktop ）下運行 Electron 時，它會實時重新加載源代碼。

Answer 4

完成chaouechi souhail給出的答案。

據我了解，他的回答旨在解決 angular 應用程序直接嵌入到電子應用程序中的情況。 如果由於某種原因您使用兩個單獨的項目，其中一個是電子應用程序，它使用電子的webview組件之一將另一個作為網絡應用程序嵌入，您可能會發現以下方法也很有幫助。

1. 在您的電子應用程序中，您將擁有類似

<webview id="webview" src="http://localhost:4200/" nodeintegration></webview>

2. 在您的角度項目中，您

   1. 安裝電子 nodejs 模塊，即npm install electron 。 chaouechi 提到的 types 模塊可能就足夠了，我不知道。
   2. 你通過ng eject webpack 配置
   3. 在 webpack 的配置 ( webpack.config.js ) 中，您將電子定義為外部模塊，這樣 webpack 就不會嘗試將其構建到 ng 應用程序中，如下擴展導出

   module.exports = { //... externals: { electron: "require('electron')", // 告訴 webpack 打包后如何在 angular 應用程序中導入電子模塊 //... }, // ... }

   4. 現在，在你的 ng 組件中，應該可以包含電子類，如下所示： import { remote } from "electron";

Answer 5

2021 年 3 月 20 日更新

角 CLI v11

這個信息很難找到，所以我會在盡可能多的地方回答過時的信息。

有幾個簡單的步驟。

1. 添加@angular-builders/custom-webpack（這樣可以避免彈出我們不想觸及的 angular 的當前 webpack 文件）。

npm i -D @angular-builders/custom-webpack

2. 修改您的 angular.json 以使用您安裝的軟件包和您創建的自定義 webpack 文件（ 有關軟件包自述文件的 更詳細說明）

3. 使您的自定義 webpack 文件如下所示：

    module.exports = {
      target: "electron-renderer",
    };

字面意思就是這樣。 您的 webpack 文件中不需要任何其他內容，您應該按照預期設置使用電子。 無需創建自己的打字文件或任何東西。