Конвертировать приложение Angular 4 в настольное приложение, используя электрон

Question

Конвертировать приложение Angular 4 в настольное приложение, используя электрон

Я разработал приложение, используя Angular 4. Мне нужно разработать настольное приложение для этого веб-приложения. Из моего первоначального исследования я получил лучшее решение - электрон. Любой, пожалуйста, предложите шаги, чтобы преобразовать угловое 4 приложение в электронное?

Пожалуйста, предложите!!!

9

angular electron electron-builder electron-packager

Источник

user4973485 04 авг '17 в 07:32

4 ответа

Другие вопросы по тегам angular electron electron-builder electron-packager

user9619830 13 апр '18 в 08:20 2018-04-13 08:20 · Answer 1 · 2018-04-13 08:20

Предполагая, что у вас есть работающее приложение Angular, я использую следующие шаги, чтобы преобразовать его в электронное веб-приложение:

В src/index.html менять <base href="/"> в <base href="./">
Установить электрон npm install electron --save-dev
Создайте main.js в корне проекта (не в src) (это где createWindow() код идет)
обеспечивать main.js указывает на dist/index.html (не просто index.html)
добавлять "main":"main.js", в package.json

добавьте их в раздел сценариев package.json

"electron": "electron .", // <-- run electron 
"electron-build": "ng build --prod && electron ." // <-- build app, then run electron `

запустить / отладить приложение с помощью:

npm run electron-build

построить приложение:

npm install electron-packager -g
npm install electron-packager --save-dev

затем запустите:

electron-packager . --platform=win32

Пример main.js:

const {app, BrowserWindow} = require('electron') 
const path = require('path') 
const url = require('url') 
let win 
function createWindow () { 
win = new BrowserWindow({width: 800, height: 600}) // load the dist folder from Angular 
win.loadURL(url.format({ pathname: path.join(__dirname, 'dist/index.html'), protocol: 'file:', slashes: true })) 
// Open the DevTools optionally: 
// 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() } })

Доступ к функциям электронного API

Существует быстрый и простой способ получить доступ к API через пакет ngx-Electron.

Установите его из консоли:

npm install ngx-electron --save

Он должен быть добавлен в массив import в /src/app/app.module.ts:

import { NgxElectronModule } from 'ngx-electron';

@NgModule({
  ...
  imports: [
    BrowserModule,
    NgxElectronModule   // Add it here
  ],
  ...
})
export class AppModule { }

Чтобы использовать его, откройте /src/app/app.component.ts и добавьте следующее в импорт:

import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';

Затем в классе компонента создайте его экземпляр с помощью внедрения зависимости, который предоставляет доступ к методам API:

export class AppComponent {

  constructor(private _electronService: ElectronService) {}   // DI

  launchWindow() {
    this._electronService.shell.openExternal('http://google.co.uk');
  }

}

Он предоставляет вам следующую функциональность (посетите их Github для получения дополнительной информации):

desktopCapturer: Electron.DesktopCapturer - API захвата рабочего стола Electron
ipcRenderer: Electron.IpcRenderer - Электронный IpcRenderer
Remote: Electron.Remote - Возможности электронного пульта
webFrame: Electron.WebFrame - Электронный веб-фрейм
буфер обмена: Electron.Clipboard - API буфера обмена
crashReporter: Electron.CrashReporter - Электронный Сбой Reporter
process: NodeJS.Process - объект процесса Electron
экран: Electron.Screen - API экрана Electron
shell: Electron.Shell - API оболочки Электрон
nativeImage: Electron.NativeImage - API NativeImage Electron
isElectronApp: boolean - указывает, выполняется ли приложение внутри электрона или нет

user1363169 20 сен '21 в 12:37 2021-09-20 12:37 · Answer 2 · 2021-09-20 12:37

Я только что успешно создал настольное приложение из приложения angular, и ниже приведены шаги:

1. Измените каталог на свое приложение angular и установите электрон

      cd my-angular-app/
  
npm i -D electron@latest

2. Создайте файл электронной записи. Создайте файл main.js в корневом каталоге вашего проекта. Этот файл будет основной точкой входа для электронного приложения и будет содержать основной API для настольного приложения.

содержимое main.js:

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

let win;
function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });
  // load the dist folder from Angular
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, '/dist/index.html'), // compiled verion of our app
      protocol: "file:",
      slashes: true
    })
  );
  // The following is optional and will open the DevTools:
  // win.webContents.openDevTools()
  win.on("closed", () => {
    win = null;
  });
}
app.on("ready", createWindow);
// on macOS, closing the window doesn't quit the app
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

3. обновите package.json, указав сведения о вашем приложении.

Обновите файл package.json, чтобы он указывал на основную точку входа в электронном виде, и введите информацию о своем приложении (имя приложения, версия, описание и автор).

package.json

      {
  "name": "my-angular-app",
  "version": "0.0.1",
  "main": "main.js",
  "author" : "my-name",
  "description": "The app is about foo and bar",
  ...
}

4. Обновите скрипт в package.json.

Добавьте новый сценарий NPM, который сначала создаст сборку, а затем запустит настольное приложение из папки dist.

      {
  ...
  "scripts": {
   "electron": "ng build --base-href ./ && electron .",
   ...
  }
 ...
}

5. Обновите angular, чтобы указать каталог сборки.

В angular.json установите каталог сборки, как мы установили /dist/index.html в файле main.js.

      ...,
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist",

6. Запустите приложение. При прочих равных, вы должны увидеть, что приложение запущено в окне рабочего стола после выполнения команды run:

      npm run electron

7. Сборка (упаковка) приложения:

С инструментами

Вы можете использовать следующие инструменты для распространения вашего приложения:

электронная кузница
строитель электронов
электронный упаковщик

Эти инструменты позаботятся обо всех шагах, которые вам нужно предпринять, чтобы получить распространяемое приложение Electron, например, объединить ваше приложение, переименовать исполняемый файл и установить правильные значки.

Ниже показано, как вы можете упаковать electronic-forge.

1. Добавьте Electron Forge в качестве компонента разработки вашего приложения и используйте его команду импорта для настройки каркаса Forge:

      npm install --save-dev @electron-forge/cli
npx electron-forge import

2. Создайте распространяемый файл с помощью команды make в Forge:

      npm run make

Electron Forge создает папку out, в которой будет находиться ваш пакет:

      // Example for macOS
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

Я надеюсь, что это поможет многим людям.

user3474387 04 авг '17 в 08:23 2017-08-04 08:23 · Answer 3 · 2017-08-04 08:23

Простые шаги:

Построить угловое приложение (напр.: ng build)
Скопируйте файлы из dist каталог для электронного проекта (index.html bundle.js так далее.)
Запустить электронное приложение

3

Источник

user3474387 04 авг '17 в 08:23

24 фев '21 в 11:13 2021-02-24 11:13 · Answer 4 · 2021-02-24 11:13

У меня есть решение. Просто добавь ../ на путь к вашему изображению, например: src="../assets/someImage.png"

-1

Источник

24 фев '21 в 11:13