# demo-angular-electron

**Repository Path**: consolelog/demo-angular-electron

## Basic Information

- **Project Name**: demo-angular-electron
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-03-20
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Angular + Electron 打包桌面应用

- [通过Angular脚手架初始化工程](#通过Angular脚手架初始化工程)
- [安装Electron依赖](#安装Electron依赖)
- [加入Electron配置文件](#加入Electron配置文件)
- [使用Electron进行本地调试](#使用Electron进行本地调试)
- [使用Electron将项目打包成桌面应用](#使用Electron将项目打包成桌面应用)
- [更多](#更多)

## 通过Angular脚手架初始化工程

```
ng new demo-angular-electron --skip-install --routing --style=scss
cd demo-angular-electron
npm install
```

## 安装Electron依赖

首先安装Electron的依赖

```
npm --save-dev install electron
```

## 加入Electron配置文件

Electron配置文件为[electron.conf.js](electron.conf.js)

## 使用Electron进行本地调试

在 `package.json` 中加入以下脚本:

```
{
    ....
    "script": {
        ...
        "start": "ng serve",
        "electron": "electron --serve ./electron.conf",
        ...
    }
}
```

执行 `npm start` 开启本地调试，之后执行 `npm run electron` 开启桌面应用

## 使用Electron将项目打包成桌面应用

修改 `app-routing.module.ts` 中的 `RouterModule.forRoot(routes)` 为 `[RouterModule.forRoot(routes, {useHash: true})]`

修改[angular.json](angular.json)中 `projects/${projectName}/architect/build/options/outputPath` 的值为 `dist`

安装electron打包依赖 

```
npm install --save-dev electron-builder
```

添加打包[配置文件](electron-builder.json)

在 `package.json` 中加入以下脚本:

```
{
    ....
    "script": {
        ...
        "start": "ng serve",
        "build:mac": "ng build --prod --base-href ./ && electron-builder build --mac",
        "build:windows": "ng build --prod --base-href ./ && electron-builder build --windows",
        "build:linux": "ng build --prod --base-href ./ && electron-builder build --linux",
        ...
    }
}
```

运行对应系统平台下的命令，比如我是mac系统，就可以运行: `npm run build:mac`， 之后就会在release目录中生成对应平台的可执行桌面应用程序。

## 更多

[Electron官网](https://www.electronjs.org/)

[Angular](https://angular.cn/)

[@angular/cli](https://angular.cn/cli)