开始使用Angular + Electron

2 年 ago
宇, 华
1 minute

开始使用Angular和Electron

简介

最近我一直关注着Electron。由于很久没有用Angular，我想用Angular + Electron来尝试制作一个应用程序。首先，我打算用Angular-CLI创建的模板，并用Electron启动它。

简而言之。

源代码

步骤

创建一个Angular项目

# いつも通りCLIからスタート
$ng new angular-electron

Electron安装

$ npm install electron --save-dev

进行各种修正以使其能够启动

参考公式文件和angular-electron进行开发。

修改 Angular.json

项目 > 建筑师 > 建造 > 选项 > 将outputPath更改为/dist/项目名称（此次为angular-electron），仅限于dist文件夹。

{
  ...
  "projects": {
    ...
      "architect": {
        "build": {
          ...
          "options": {
            "outputPath": "dist",
            ...

创建main.js。

创建用于启动应用程序的JavaScript。
虽然我想用TypeScript编写，并尝试使用热重载等功能，
但首先要确认JavaScript在确保正确运行的基础上。

const { app, BrowserWindow, screen } = require('electron');
const url = require('url');
const path = require('path');

let win = null;

function createWindow() {
  const electronScreen = screen;
  const size = electronScreen.getPrimaryDisplay().workAreaSize;

  // ブラウザウインドウを作成
  win = new BrowserWindow({
    x: 0,
    y: 0,
    width: size.width,
    height: size.height,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadURL(url.format({
    pathname: path.join(__dirname, 'dist/index.html'),
    protocol: 'file:',
    slashes: true
  }));

  // dev toolを開く
  win.webContents.openDevTools();

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

  return win;
};

app.allowRendererProcessReuse = true;

app.on('ready', () => setTimeout(createWindow, 400));
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

修改 package.json

在package.json的main键中指定上述文件，以便使用electron命令进行启动。

{
    "name": "angular-electron",
    "main": "main.js",
    ...
}

确认能够启动

在确认能够启动应用程序之前，请先执行Angular的构建。

# Angularのファイルをビルド(最初から入っているコマンドそのまま)
$ npm run build
> dist配下にファイルが出力されていることを確認

# アプリを起動してみる
$ npx electron .
image.png

综述

我想用Electron + Angular来制作一个应用程序，所以我先试着启动它。
仅仅启动应用程序我很快就完成了，所以下一步就是将main.js转换为ts，并开始创建应用程序。

请参考以下网站

    • ドキュメント | Electron

 

    • はじめての Electron アプリ | Electron

 

    maximegris/angular-electron: Ultra-fast bootstrapping with Angular and Electron (Typescript + SASS + Hot Reload)
bannerAds