如何使用 angular cli 以 angular 2 导入 Electron [英] How to import Electron in angular 2 using angular cli

问题描述

我正在尝试使用 Angular 2(使用最新的基于 webpack 的 angular cli 配置)为 gui 制作一个 Electron 应用程序原型，但我被卡住了，因为我不知道如何在我的 angular2 组件中导入 Electron api.具体来说，我希望能够通过单击 ui 中的按钮打开一个新的 BrowserWindow ......所以:

I'm trying to prototype an Electron app using Angular 2 (configured with the latest webpack-based angular cli) for the gui, but I'm stuck since I don't get how to import Electron api in my angular2 components. Specifically I want to be able to open a new BrowserWindow at the click on a button in the ui... so:

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

在我的组件中:

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

但是...我如何导入 BrowserWindow?！

but... how can I import BrowserWindow?!

通过使用:

import { BrowserWindow } from 'electron';

我收到无模块错误"并按照此问题的答案进行操作:Webpack 不能找到模块电子"我得到:

I get a "no module error" and by following the answer to this question: Webpack cannot find module 'electron' I get:

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

我该怎么办?

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

ps. by running "electron ." without the BrowserWindow import the app is working properly

推荐答案

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

Run the command npm install electron @types/electron Then import it normally using

import { ipcRenderer } from 'electron'.

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

If you run into any problems, try to run npm eject, a webpack.config.js will be generated, add "target": "electron-renderer" at the top of module.exports

这篇关于如何使用 angular cli 以 angular 2 导入 Electron的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！