使用 Electron 和 Angular 2 开发桌面应用程序答案

【问题标题】：Develop Desktop App With Electron And Angular 2使用 Electron 和 Angular 2 开发桌面应用程序
【发布时间】：2018-01-17 08:29:28
【问题描述】：

我在使用 Electron 和 Angular 开发（创建环境）桌面应用程序时遇到问题。这个应用程序在某些时候必须触发一个特定于 Electron 的 showOpenDialog，以便从文件系统中选择一个目录。假设我有以下角度分量：

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <button (click)="openDirectory()">Open directory</button>
        <p> {{selectedDirectory}} </p>
    `
})

export class AppComponent {

    selectedDirectory: string = "None";
    openDirectory() {
        // Here I need to call the 'showOpenDialog' from electron
        // and update the selectedDirectory property
    }

}

...但是在openDirectory 中调用showOpenDialog 将不起作用，并且会返回编译错误，因为Angular 不知道showOpenDialog 到底是谁。在典型的 Electron 应用程序中，您将编写如下内容：

const {dialog} = require('electron').remote;

var path = dialog.showOpenDialog({
    properties: ['openDirectory']
});

现在我必须构建 Angular 项目，修改 bundle.js 文件，最后添加 showOpenDialog 等电子功能。之后，我需要将分发文件复制到 Electron 项目中。我知道，这真是一团糟。
问：开发这种应用程序的更好方法是什么？就像同一个项目中的 Angular 和 Electron 环境一样。

【问题讨论】：

标签： javascript angular electron

【解决方案1】：

您只需在 Angular 应用中安装电子（及其类型），然后导入您的依赖项

安装：

npm install electron @types/electron

用法：

import { remote } from 'electron';


openDirectory() {
    remote.showOpenDialog();
}

【讨论】：

不工作，先生。你得到Uncaught TypeError: fs.existsSync is not a function。我必须以某种方式使用require
运行时会发生这种情况吗？
是的，在运行时。我在 Electron 中使用了win.loadURL('http://localhost:4200');
这样，编译错误就解决了。不了解电子，我无法再提供任何帮助。也许这会有所帮助：stackoverflow.com/questions/43966353/…