2021 年 3 月 20 日更新

Question

我试图使用Angular 2（使用最新的基于webpack的角度cli）为gui原型化一个Electron应用程序，但是因为我不知道如何导入而导致我陷入困境我的angular2组件中的电子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';

我得到一个＆＃34;没有模块错误＆＃34;并按照这个问题的答案：Webpack cannot find module 'electron'我得到：

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

我该怎么办？

PS。通过运行＆＃34; electron .＆＃34;没有BrowserWindow导入该应用正常运行

Answer 1

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

正常导入

import { ipcRenderer } from 'electron'。

如果遇到任何问题，请尝试运行npm eject，生成webpack.config.js，添加＆＃34; target＆＃34;：＆＃34; electron-renderer＆＃34;在module.exports的顶部

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给出的答案。

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

在您的电子应用中，您会有

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

在角色项目中
1. 安装电子nodejs模块，即npm install electron。 chaouechi提到的类型模块可能就足够了，我不知道。
2. 通过ng eject
3. 在webpack的配置（webpack.config.js）中，您将电子定义为外部模块，以便webpack不会尝试将其构建到ng应用程序中，扩展导出如下所示

Answer 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 文件中不需要任何其他内容，您应该按照预期设置使用电子。无需创建自己的打字文件或任何东西。

如何使用角度cli导入角度为2的电子

5 个答案:

2021 年 3 月 20 日更新

Angular CLI v11