新建Angular+Electron项目

Posted 2023-03-19

参考技术A 上一章我们讲到新建Electron项目，其目的只是为了让大家对Electron有个大致的了解。

这一节我们来新建Angular+Electron项目

命令行

     ng new angualr-electron

进入项目文件夹

     cd angualr-electron 

安装antd ui库

     ng add ng-zorro-antd

先不着急安装electron，我们先运行一下Angular项目，看看跑得起来不

     ng serve --port 2323 -o

将Electron当作刚才新建的Angular项目中的开发依赖项，在项目文件夹中输入命令

     cnpm install electron--save-dev

     cnpm install ngx-electron--save

通过ngx-electron的包依赖，可以访问Electron API。需要在 app.module.ts 中引用

import  NgxElectronModule  from 'ngx-electron';

imports: [

    BrowserModule,

    AppRoutingModule,

    IconsProviderModule,

    NgZorroAntdModule,

    FormsModule,

    HttpClientModule,

    BrowserAnimationsModule,

    NgxElectronModule   

  ],

目前，我们的项目依然是一个Angular工程，我们需要把Electron整合进Angular框架。

（1）新建main.js文件

在项目根目录中新建main.js文件，main.js内容为：

     const app, BrowserWindow = require('electron')

     const path = require('path')

     const url = require('url')

     const electron = require('electron')

     let win

     const Menu = electron.Menu

     function createWindow () 

          // 隐藏菜单栏

          Menu.setApplicationMenu(null)

          win = new BrowserWindow(width: 1200, height: 800,resizable: true, allowRunningInsecureContent: true, experimentalCanvasFeatures: true, icon: './favicon.ico')

        win.loadURL(url.format(

     注意在某些低版本Angular中，路径写为'dist/index.html'，具体情况视你打包ng build 之后的dist文件定

          pathname: path.join(__dirname, 'dist/angualr-electron/index.html'),

          protocol: 'file:',

          slashes: true

        ))

        // 是否默认打开开发者工具：

        // win.webContents.openDevTools()

        win.on('closed', () => 

       win = null

  )



app.on('ready', createWindow)

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

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

    app.quit()

  

)

app.on('activate', () => 

  if (win === null) 

    createWindow()

  

)

（2）修改package.json

增加 

    "main": "main.js"，

修改Scripts

  "scripts": 

    "electron": "ng build && electron .",

    "electron-aot": "ng build --prod && electron .",

    "ng": "ng",

    "start": "electron .",

    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  ,

（3）修改index.html文件

  <!--修改前-->

<!-- <base href="/"> -->

 -->

   <!--修改后-->

   <base href="./">

npm run electron