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

问题描述

我正在尝试使用 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然后使用

从电子"导入 { ipcRenderer }.

如果遇到任何问题，尝试运行 npmject，会生成一个 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 中导入电子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！