新建Angular+Electron项目

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

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

一、新建Angular项目

命令行

    ng new angualr-electron

进入项目文件夹

    cd angualr-electron 

安装antd ui库

    ng add ng-zorro-antd

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

    ng serve --port 2323 -o

Angular+Antd初始界面

二、安装Electron

将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工程，我们需要把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

我的项目界面