If the CLI is installed successfully, navigate to your working directory and create a new Angular project using the following commands: Wait for your project’s files to be generated and dependencies to be installed from npm. Must have experience with HTML, CSS, JavaScript and TypeScript. Go to the angular.json file in your project's folder, and change the value of the projects → architect → build → options → outputPath key from dist/angular-electron-demo to just dist: This will make sure the compiled files will be copied under the dist folder instead of a subfolder. // when you should delete the corresponding element. I hope you loved the way we learned to set up the Electron app in Angular and using Electron API in this tutorial. He authors technical content about JavaScript, Angular and Ionic. // Dereference the window object, usually you would store window, // in an array if your app supports multi windows, this is the time. Declare initWindow function, and this function will create a new Electron window which will help Angular to host our electron application. This example code is adapted from the official starter repository. YES! It helps in building a robust cross-platform desktop application for various devices such as macOS, Linus, and Windows using HTML, JavaScript, and CSS. Please check providers/electron.service.ts to watch how conditional import of libraries has to be done when using electron / NodeJS / 3rd party librairies in renderer context (ie. Ahmed is a technical author and web developer living in Morocco with a Master's degree in software development. src/polyfill.tsで下記のように切り替えます。, 上記の対応で、NodeJSの基本のAPIが対応されました、でもElectronのAPIがまだ対応されていません。 command: Now, in your terminal, run the following command: An Electron GUI window will be opened, but will be blank. To configure electron inside Angular project, create a new file in the root of the Angular project. Run the below command to set up Electron in Angular project: As you can see, we are installing Electron package as a dev dependency because we want to use this package during development phase. We can’t directly access all of Electron’s APIs from the Angular app. © 2016-2020 positronX.io - All Rights Reserved. Node.js and NPM installed in your system, if not follow this tutorial. This should resolve the problem and load the Angular 8 app inside the Electron container. Angular の electron アプリは maximegris/angular-electron のようなボイラープレートをベースに開発する記事が多いですが、今回は利用せず electron-userland/electron-builder をそのまま利用していきます。, まずは Angular CLI でプロジェクトを開始します。 webPreferences で webSecurity: false を指定すると CORS を無視できるようです。, 今回 main.ts と typescript ファイルとしたので tsconfig.electron.json として tsconfig をproject root に配置します。 このファイルの files 配下がビルドに含めるファイルとなります。 Your application is optimised. To make this happens, you have to import your dependencies the right way. Both answers won't actually affect how we integrate Electron with Angular 10. Electron.js is a well known open-source platform developed by GitHub under the MIT license. You will need to have recent versions of Node and NPM installed on your machine and you'll also need Angular CLI 10 for creating the Angular project.