如何使用 Angular cli 在 Angular 2 中导入电子

Posted 2023-03-07

【中文标题】如何使用 Angular cli 在 Angular 2 中导入电子

【英文标题】：How to import Electron in angular 2 using angular cli

【发布时间】：2017-03-07 06:39:12

【问题描述】：

我正在尝试使用 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 cannot find module 'electron' 我得到：

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

我该怎么办？

ps。通过在没有 BrowserWindow 导入的情况下运行“electron .”，应用程序正常运行

【问题讨论】：

不行，angular-cli 不会暴露 webpack 配置，所以你需要为你的应用使用另一个配置，看这个问题github.com/angular/angular-cli/issues/1774

【参考方案1】：

运行命令npm install electron @types/electron 然后使用

正常导入

import ipcRenderer from 'electron'.

如果遇到任何问题，尝试运行npm eject，会生成一个webpack.config.js，在module.exports顶部添加“target”：“electron-renderer”

【讨论】：

对我不起作用。如果您有任何其他解决方案，请发布。

【参考方案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!!');

【讨论】：

在我看来这应该是公认的答案。它对我来说就像一种魅力。

【参考方案3】：

我尝试使用 angular-cli 和 Electron，但无法让它们一起工作。这就是我开始以下项目的原因：https://github.com/osechet/angular-tour-of-heroes-webpack 它将 Angular 2 与 webpack 和 Electron 集成在一起。它基于 Angular 2 教程（带有单元测试）。在开发模式 (npm run start.desktop) 下运行 Electron 时，它会重新加载源代码。

【参考方案4】：

完成chaouechi souhail给出的答案。

据我了解，他的回答旨在解决角度应用程序直接嵌入电子应用程序的情况。 如果由于某种原因您正在使用两个单独的项目，其中一个是电子应用程序，它使用电子的webview 组件之一将另一个嵌入为网络应用程序，您可能会发现以下方法也很有帮助。

在您的电子应用程序中，您将拥有类似的东西

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

在你的 Angular 项目中

安装电子nodejs模块，即npm install electron。 chaouechi 提到的 types 模块可能就足够了，我不知道。 你通过ng eject弹出webpack配置 在 webpack 的配置 (webpack.config.js) 中，您将 electron 定义为一个外部模块，这样 webpack 就不会尝试将其构建到 ng 应用程序中，扩展导出如下

module.exports = //... 外部： electron: "require('electron')", // 告诉 webpack 在打包后如何在你的 Angular 应用程序中导入电子模块 //... , //...

现在，在您的 ng 组件中，应该可以包含以下电子类：import remote from "electron";

【参考方案5】：

自 2021 年 3 月 20 日起更新

Angular CLI v11

这个信息很难找到，所以我会在尽可能多的地方回答过时的信息。

有几个简单的步骤。

添加@angular-builders/custom-webpack（这样可以避免您弹出我们不想接触的 Angular 当前的 webpack 文件）。

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

修改您的 angular.json 以使用您安装的包和您创建的自定义 webpack 文件 (more detailed instructions on the package's readme)

让你的自定义 webpack 文件看起来像这样：

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

字面意思就是这样。您的 webpack 文件中不需要任何其他内容，您应该可以按照预期使用电子。无需创建自己的类型文件或任何东西。