electron打包angular为exe程序，比较新版本的angular和electron

一。 先创建一个angular项目，具体安装步骤可以查看angular官网介绍，这里不做过多介绍，（https://angular.cn/guide/setup-local）这是官网安装地址，有可能地址会访问不了：

　　1.全局安装Angular CLI：npm install -g @angular/cli    

　　2.创建一个名称为test的项目：ng new test

二。安装electron，注意如果使用npm官方镜像安装electron会比较慢，这里我们切换成淘宝镜像会更好更快，（https://www.electronjs.org/zh/docs/latest/tutorial/quick-start）这是官网安装地址，有可能地址会访问不了：

　　1.安装electron：npm install --save-dev electron

　　2.安装electron的打包脚手架：npm install --save-dev @electron-forge/cli

　　3.使用"import"命令设置 Forge 的脚手架：npx electron-forge import

　　4.安装好后，package.json中的scripts中会多打包的命令，如下图所示，需要把"start":"electron -forge start"改成angular的启动命令，现在这是electron的启动命令

　　5.修改后如下图所示：

 

三。到这里angular和electron就安装好了，现在需要做一些配置，在package.json中添加如下图：

　　1.description和author这两个字段不能为空，可以随意填写；main对应的就是electron的的打包入口文件

 

　　2.找到src/index.html，修改如下图所示

 　　3.执行angular的打包命令，npm run build，打包完成会得到一个dist目录的，我这里打包完成后的的index.html如下图所示，记住这个路径（dist/angular1/browser/index.html），如下图所示：

　　4.创建main.js，和package.json同级目录创建，也就是根目录下创建，注意路径红色字体提醒，具体内容如下：　　　

　　　　const {app,BrowserWindow, ipcMain} = require('electron');

　　　　const path = require('node:path')

　　　　const createWindow=()=>{

　　　　　　const win=new BrowserWindow({

　　　　　　　　// width:800,//窗口具体宽度

　　　　　　　　// height:800,//窗口具体高度

　　　　　　　　 webPreferences: {

　　　　　　　　　　nodeIntegration: true,//打开浏览器调试

 　　　　　　　　}

　　　　　　})

　　　　　　win.maximize();//窗口默认最大化

 

　　　　　　//先执行npm润build后的dist目录下的index.html，即上一步骤的index.html的路径

　　　　　　win.loadURL(`file://${__dirname}/dist/angular0/browser/index.html`);//加载的具体位置

　　　　}

　　　　function handleSetTitle(event,title){

　　　　　　const webContents=event.sender;

　　　　　　const win=BrowserWindow.fromWebContents(webContents)

　　　　　　win.setTitle(title)

　　　　}

　　　　app.whenReady().then(()=>{

　　　　　　ipcMain.handle('ping', () => 'pong')

　　　　　　ipcMain.on('set-title',handleSetTitle)

　　　　　　createWindow()

　　　　　　app.on('active',()=>{

　　　　　　　　if(BrowserWindow.getAllWindows().length === 0){

　　　　　　　　　　createWindow()

　　　　　　　　}

　　　　　　})

　　　　　　app.on('window-all-closed',()=>{

　　　　　　　　if(process.platform !== 'darwin'){

　　　　　　　　　　app.quit();

　　　　　　　　}

　　　　　　})

　　　　})

　　5.可以使用启动命令查看是否启动成功：npm run electron

　　6.执行打包命令：npm run package 和 npm run make都可以使用，有一点差别，可以自己实际使用，我这里使用 npm run package ，第一个是打包后的目录文件夹，第二张图是打包后的exe：

　

 

四。该方式打包生成的体积较大，打包后的resources目录生成的是一个app.asar，不是一个目录，下一篇介绍生成打包后的目录是一个目录，不是app.asar