Electron+Anglar 설치

25722 단어 AngularElectrontech

■2022/1/2 보충기 type script의 main.js가 바뀌었지만 특별한 의미가 없어요. 오랜만에 이 항목대로 하면 움직이지 않아서 수정했어요.그리고 anular/cli의 version은 13입니다.


이것도 자신의 노트다.이것은 최소한의 미니 스타일의 설정이다
여기에 소개된 사이트는 많지만 Anglar12 때문인지 전혀 이동이 안 된다.분명히 ngserv-open에서 정상적으로 작동할 수 있으나eletron을 시작하면 {title} 같은 것이component에서 설정한 값이 나타나지 않고 그대로 나와서 정말 고민입니다.
여기만 움직일 수 있는 설정이라고 써있어요.
다소 수정이 필요하기 때문에 쪽지에 쓰여 있다
■ Angular install
(-g 를 추가하지 않고 전역에 설치하면ng 명령이 잘못됩니다.)
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest
■ Electron 프로젝트 제작
ng new PROJECT_NAME
■ electron install
■electron의main.js 만들기
각 항목은 필요에 따라 수정한다
loadUrl이 지정한 경로가 매우 중요합니다
npm install --save-dev electron@latest
■ package.json 만들기
const {app, BrowserWindow, Menu} = require('electron')
const path = require("path");
// const Config = require('electron-config');

function createWindow(canvasObject) {

  const mainWindow = new BrowserWindow({
    width: 1600,
    height: 1280,
    'icon': 'img/icons/icon.ico',
    webPreferences: {
      worldSafeExecuteJavaScript: true,
      frame: false,
      backgroundColor: 'WHITE',
      contextIsolation: true,
      nodeIntegration: true,
      nodeIntegrationInWorker: true,
      useContentSize: true,
      enableRemoteModule: true,
    },
  })
  mainWindow.loadFile(path.join(__dirname, `/dist/index.html`)).then(r => 1)

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

  mainWindow.on('closed', function () {
    app.quit();
  });
  // Build menu from template
  const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
  // Insert menu
  Menu.setApplicationMenu(mainMenu);
}


// 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.whenReady().then(createWindow)

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

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

const mainMenuTemplate = [
  // Each object is a dropdown
  {
    label: '',
    submenu: []
  }
];
■src/app/app.component.수정
{
  "name": "PROJECT_NAME",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:win": "npm run electron && node_modules/.bin/electron-builder build --win --x64",
    "electron": "ng build --base-href ./ && electron ."
  },
■src/app/app.component.ts 수정
<h1>{{title}}</h1>
■src/index.수정
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'TEST';
}
■angular.json의 outputPath만 수정(중요)
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TEST</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
■ 시작(화면에만 TEST로 표시되는 어플리케이션 시작)
"outputPath": "dist",
■ 포장 배포 준비
npm run electron
■electron-builder.json 만들기
npm install --save-dev electron-builder
■봉인(electron-builder.json이 지정한 디렉터리에서 생성)
{
  "productName": "angular-electron",
  "directories": {
    "output": "release/"
  },
  "files": [
    "**/*",
    "!**/*.ts",
    "!*.code-workspace",
    "!LICENSE.md",
    "!package.json",
    "!package-lock.json",
    "!src/",
    "!e2e/",
    "!hooks/",
    "!angular.json",
    "!_config.yml",
    "!karma.conf.js",
    "!tsconfig.json",
    "!tslint.json"
  ],
  "win": {
    "icon": "dist/assets/icons",
    "target": ["portable"]
  },
  "mac": {
    "icon": "dist/assets/icons",
    "target": ["dmg"]
  },
  "linux": {
    "icon": "dist/assets/icons",
    "target": ["AppImage"]
  }
}
※ 추가 보충
상기 이외에도 가장 잘하는 일이 있기 때문에 필기를 해야 한다
■text를 읽는 row-loader 설정
여기요.
여기.
■ json의 json-loader를 읽기 위해
json
■ 쉽게 틀을 만들 수 있다
Angular Material
Material을 읽을 수 없는 경우 
npx electron-builder --win --x64 --dir
파이썬 심화(네임드 튜플)-1
Python 연산자와 Data Type

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage