项目作者: dashkan

项目描述 :
Angular Webpack Build Facade for Electron
高级语言: TypeScript
项目地址: git://github.com/dashkan/ng-electron-devkit.git
创建时间: 2018-06-26T22:03:17Z
项目社区:https://github.com/dashkan/ng-electron-devkit

开源协议:MIT License

下载


Angular Webpack Build Facade for Electron

Allows targeting electron renderer in Angular 6 applications.

Installation

npm install ng-electron-devkit —save-dev

Configuration

  1. Install electron and cpx in your project

    1. npm install electron --save
    2. npm install cpx --save-dev
  2. Create electron main application (src/electron/index.ts)
    ```typescript
    import {app, BrowserWindow, ipcMain} from ‘electron’;

if (process.mas) app.setName(‘Angular 6 / Electron Demo’)

// Keep a global reference of the window object, if you don’t, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow: BrowserWindow

function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})

// and load the index.html of the app.
mainWindow.loadFile(‘index.html’)

// Open the DevTools.
// mainWindow.webContents.openDevTools()

// Emitted when the window is closed.
mainWindow.on(‘closed’, () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on(‘ready’, createWindow)

// Quit when all windows are closed.
app.on(‘window-all-closed’, () => {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== ‘darwin’) {
app.quit()
}
})

app.on(‘activate’, () => {
// On OS X it’s common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
console.log(‘activated’);
if (mainWindow === null) {
createWindow()
}
})

  1. 3. Create tsconfig.json for electron main application (src/electron/tsconfig.json). Note: outDir must resolve to the same path that outputPath does in step #10
  2. ```json
  3. {
  4. "compilerOptions": {
  5. "target": "es6",
  6. "module": "commonjs",
  7. "outDir": "../../dist/electron",
  8. "strict": false,
  9. "esModuleInterop": true
  10. }
  11. }
  1. Add isElectron: false value to src/environments/environment.ts and src/environments/environment.prod.ts

  2. Add default electron environment (src/environments/environment.electron.ts)
    ``typescript // This file can be replaced during build by using thefileReplacementsarray. //ng build —-prodreplacesenvironment.tswithenvironment.prod.ts. // The list of file replacements can be found inangular.json`.

export const environment = {
production: false,
isElectron: true
};

/*

  • In development mode, to ignore zone related error stack frames such as
  • zone.run, zoneDelegate.invokeTask for easier debugging, you can
  • import the following file, but please comment it out in production mode
  • because it will have performance impact when throw error
    */
    import ‘zone.js/dist/zone-error’; // Included with Angular CLI.
    ```
  1. Add production electron environment (src/environments/environment.electron-prod.ts)

    1. export const environment = {
    2. production: true,
    3. isElectron: true
    4. };
  2. Electron does not support reloading html5 routes. Check to see if we are running in electron and set routing to use hash. Update src/app/app-routing.module.ts
    ```typescript
    import { NgModule } from ‘@angular/core’;
    import { Routes, RouterModule } from ‘@angular/router’;
    import { environment } from ‘../environments/environment’;

const routes: Routes = [];

@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: environment.isElectron })],
exports: [RouterModule]
})
export class AppRoutingModule { }

  1. 8. Create new electron specific polyfill file (src/polyfills-electron.ts)
  2. ```typescript
  3. /**
  4. * This file includes polyfills needed by Angular and is loaded before the app.
  5. * You can add your own extra polyfills to this file.
  6. *
  7. * This file is divided into 2 sections:
  8. * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
  9. * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
  10. * file.
  11. *
  12. * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
  13. * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
  14. * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
  15. *
  16. * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
  17. */
  18. /***************************************************************************************************
  19. * BROWSER POLYFILLS
  20. */
  21. /** IE9, IE10 and IE11 requires all of the following polyfills. **/
  22. // import 'core-js/es6/symbol';
  23. // import 'core-js/es6/object';
  24. // import 'core-js/es6/function';
  25. // import 'core-js/es6/parse-int';
  26. // import 'core-js/es6/parse-float';
  27. // import 'core-js/es6/number';
  28. // import 'core-js/es6/math';
  29. // import 'core-js/es6/string';
  30. // import 'core-js/es6/date';
  31. // import 'core-js/es6/array';
  32. // import 'core-js/es6/regexp';
  33. // import 'core-js/es6/map';
  34. // import 'core-js/es6/weak-map';
  35. // import 'core-js/es6/set';
  36. /** Evergreen browsers require these. **/
  37. // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
  38. import 'core-js/es7/reflect';
  39. /**
  40. * Web Animations `@angular/platform-browser/animations`
  41. * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
  42. * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
  43. **/
  44. // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
  45. /**
  46. * By default, zone.js will patch all possible macroTask and DomEvents
  47. * user can disable parts of macroTask/DomEvents patch by setting following flags
  48. */
  49. // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
  50. // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
  51. // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  52. /*
  53. * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
  54. * with the following flag, it will bypass `zone.js` patch for IE/Edge
  55. */
  56. // (window as any).__Zone_enable_cross_context_check = true;
  57. /***************************************************************************************************
  58. * Zone JS is required by default for Angular itself.
  59. */
  60. import 'zone.js/dist/zone-mix'; // Included with Angular CLI.
  61. import 'zone.js/dist/zone-patch-electron';
  62. /***************************************************************************************************
  63. * APPLICATION IMPORTS
  64. */
  1. Update scripts in package.json to build electron project

    1. "scripts": {
    2. "ng": "ng",
    3. "start": "ng serve",
    4. "start:electron": "electron dist/electron",
    5. "build": "ng build",
    6. "build:electron-main": "tsc -p src/electron",
    7. "postbuild:electron-main": "cpx package.json dist/electron",
    8. "build:electron-renderer": "ng build electron",
    9. "build:electron": "npm run build:electron-renderer && npm run build:electron-main",
    10. "test": "ng test",
    11. "lint": "ng lint",
    12. "e2e": "ng e2e"
    13. },
  2. Create a new project config in angular.json.

    • Copy contents from initial project
    • Rename the project to electron
    • Change architect/build/builder from @angular-devkit/build-angular:browser to ng-electron-devkit:renderer
    • Change architect/build/options/outputPath to dist/electron
    • Create default environment for electron project architect/build/options/fileReplacements
      1. "fileReplacements": [
      2. {
      3. "replace": "src/environments/environment.ts",
      4. "with": "src/environments/environment.electron.ts"
      5. }
      6. ]
    • Remove serve section / property
    • (OPTIONAL) If using routing set architect/build/options/baseRef to an empty string.

Sample angular.json electron project

  1. "electron": {
  2. "root": "",
  3. "sourceRoot": "src",
  4. "projectType": "application",
  5. "prefix": "app",
  6. "schematics": {
  7. "@schematics/angular:component": {
  8. "styleext": "scss"
  9. }
  10. },
  11. "architect": {
  12. "build": {
  13. "builder": "ng-electron-devkit:renderer",
  14. "options": {
  15. "outputPath": "dist/electron",
  16. "index": "src/index.html",
  17. "main": "src/main.ts",
  18. "polyfills": "src/polyfills-electron.ts",
  19. "tsConfig": "src/tsconfig.app.json",
  20. "assets": [
  21. "src/favicon.ico",
  22. "src/assets"
  23. ],
  24. "styles": [
  25. "src/styles.scss"
  26. ],
  27. "scripts": [],
  28. "baseHref": "",
  29. "fileReplacements": [
  30. {
  31. "replace": "src/environments/environment.ts",
  32. "with": "src/environments/environment.electron.ts"
  33. },
  34. {
  35. "replace": "src/app/ipc.service.ts",
  36. "with": "src/app/ipc.service-electron.ts"
  37. }
  38. ]
  39. },
  40. "configurations": {
  41. "production": {
  42. "fileReplacements": [
  43. {
  44. "replace": "src/environments/environment.ts",
  45. "with": "src/environments/environment.electron-prod.ts"
  46. }
  47. ],
  48. "optimization": true,
  49. "outputHashing": "all",
  50. "sourceMap": false,
  51. "extractCss": true,
  52. "namedChunks": false,
  53. "aot": true,
  54. "extractLicenses": true,
  55. "vendorChunk": false,
  56. "buildOptimizer": true
  57. }
  58. }
  59. },
  60. "extract-i18n": {
  61. "builder": "@angular-devkit/build-angular:extract-i18n",
  62. "options": {
  63. "browserTarget": "sample:build"
  64. }
  65. },
  66. "test": {
  67. "builder": "@angular-devkit/build-angular:karma",
  68. "options": {
  69. "main": "src/test.ts",
  70. "polyfills": "src/polyfills.ts",
  71. "tsConfig": "src/tsconfig.spec.json",
  72. "karmaConfig": "src/karma.conf.js",
  73. "styles": [
  74. "src/styles.scss"
  75. ],
  76. "scripts": [],
  77. "assets": [
  78. "src/favicon.ico",
  79. "src/assets"
  80. ]
  81. }
  82. },
  83. "lint": {
  84. "builder": "@angular-devkit/build-angular:tslint",
  85. "options": {
  86. "tsConfig": [
  87. "src/tsconfig.app.json",
  88. "src/tsconfig.spec.json"
  89. ],
  90. "exclude": [
  91. "**/node_modules/**"
  92. ]
  93. }
  94. }
  95. }
  96. }
  1. Add main property to package.json

    1. "main": "index.js"
  2. Build your project

    1. npm run build:electron
  3. Launch your electron application!!!!

    1. npm run start:electron

Sample Application

Clone this repository and checkout the sample