angular-electron을 사용하여 tot 앱을 만들었습니다.

개요

지난번 의 흐름에서 angular를 만져 보았습니다.
김에 electron도 해 보자-라고 하는 것으로, 또 또todo어플리케이션 만들어 보았습니다.

조사해 보면 스스로 angular와 electron을 맞추어 고뇨뇨할 수 있는 것 같았습니다만, 잘 모르는 (orz) 때문에 angular-electron 을 토대로 사용해 주었습니다.

출처 : htps : // 기주 b. 코 m / 야스 아키히라의 / 어딘가 p

했던 일 angular-electron을 git clone한다. git clone https://github.com/maximegris/angular-electron.git bootstrap4가 사용하고 싶었기 때문에, bower로 install, 아이콘도 사용하고 싶었기 때문에 open-iconic를 인스톨. bower install bootstrap4 --save bower install open-iconic --save todoapp-angular-electron/src/app/components/home/ 부하를 기본적으로 고뇨고요 입력 패널의 개폐를 위한 애니메이션과 파일 출력을 위해서 @angular/animations, ngx-fs를 개별 인스톨. npm i @angular/animations --save npm i ngx-fs --save 곤란한 & 조사한 것 bower_components 디렉토리 배치 위치가 이상합니다. .bowerrc를 루트 디렉토리로 만들고 아래와 같이 설정하면 ok .bowerrc { "directory":"src/assets/bower_components" } 파일 출력 방법을 잘 모르겠습니다. 입력한 todo를 혹시 보답하는 일이 있을지도 모르기 때문에, 파일 출력하고 싶었지만 파일 출력 방법을 몰랐다. 그런 ngx-fs라는 패키지가 npm에 오르고 있었기 때문에 사용하면 잘 갔다. 브라우저 및 데스크톱 버전의 처리 분기 조사해도 잘 몰랐습니다만, userAgent를 보면 데스크탑판에는 electron이 들어가 있으므로 그것으로 분기시켰다. home.component.ts (일부) if (-1 < window.navigator.userAgent.indexOf("Electron")) { 외부 CSS 로딩 설명 위치 어디? 마지막으로 todoapp-angular-electron/src/styles.scss에 다음과 같은 느낌으로 썼다. styles.scss @import "./assets/bower_components/bootstrap4/dist/css/bootstrap.css"; @import "./assets/bower_components/open-iconic/font/css/open-iconic-bootstrap.css"; 자주 사용한 명령이나 메모 명령 내용 ng serve 웹에서 실행합니다. electron. pj 루트 디렉토리에서 실행하면 데스크탑 형식으로 실행된다. npm run electron:windows windows용으로 빌드하기 npm run electron:linux linux 용 빌드 npm run electron:mac mac 용 빌드 ※electron 커맨드로 데스크탑 실행하는 경우에 빌드하고 나서가 아니면 변경이 반영되지 않으므로 주의 · gif 이미지를 만드는데 ScreenToGif 가 편리했다.

패키징

electron-packager를 사용한다. windows라면 exe가 출력된다. 놀라운

electron-packager . todoapp-angular-electron --platform=win32 --arch=ia32

소감

생각했던 것보다 손쉽게 생긴 것 같다. 의외로 정보원이 적게 느껴졌다. (영어 약자입니다..)
데스크톱판에 빌드하는데 시간이 걸리므로, 기본은 ng serve한 채로 개발하면 좋을 것 같다(자동 리로드해 준다)