How to access Electron Api in my Angular Components?

This page summarizes the projects mentioned and recommended in the original post on /r/Angular2

CodeRabbit: AI Code Reviews for Developers
Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
coderabbit.ai
featured
Nutrient – The #1 PDF SDK Library, trusted by 10K+ developers
Other PDF SDKs promise a lot - then break. Laggy scrolling, poor mobile UX, tons of bugs, and lack of support cost you endless frustrations. Nutrient’s SDK handles billion-page workloads - so you don’t have to debug PDFs. Used by ~1 billion end users in more than 150 different countries.
www.nutrient.io
featured
  1. nx-electron

    Electron schematics for nrwl nx platform

    I'm honestly not overly familiar with the "typical" setup of an Electron app (if there is such a thing — the docs make it sound pretty open-ended). I've only ever used it in the context of nx-electron (not that I can recommend it — it's not up-to-date with the latest versions of nx/Angular and it's kind of harrowing to get working even in the best case). But not being able to import anything in your entry-point seems like an unusual constraint — how are you bootstrapping the application?

  2. CodeRabbit

    CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

    CodeRabbit logo
  3. electron-quick-start

    Clone to try a simple Electron app

    In any event, I just took a closer look at my project, and it looks like the key thing is to wait for Electron's ready event before registering the ipcMain listeners. So, taking Electron's quick-start example as a starting point, you would want to do it in the app.whenReady().then(() => { ... }) callback, probably just before creating the window. Does that help?

  4. nx

    Build system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution.

    It's hard to know for sure without doing a deep-dive on your repo, but it sounds like you're not using a bundler for your Electron project. Honestly, if the Electron part of your app is pretty lightweight, I wouldn't even worry about it — if it ain't broke, don't fix it. :) If at some point this starts to feel excessively limiting, you could either look into setting up a custom build system for your Electron app (i.e., via Rollup or Parcel or Webpack, etc.) or look into migrating to Nx and using the nx-electron plugin I mentioned earlier (as long as you're on Angular <= v11). But either of those options open a huge can of worms — if you don't have a lot of experience with bundling/building JS applications, it is quite a deep rabbit hole to dive into.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Resources to get started with Nx

    6 projects | dev.to | 10 Nov 2022
  • Does anyone have an interesting pattern or library for multi repo routing that they use?

    1 project | /r/Angular2 | 11 Feb 2022
  • Integrate the Remote apps with the Dashboard

    2 projects | dev.to | 28 Jan 2022
  • Monorepos Explained

    1 project | dev.to | 26 Jan 2022
  • New Terminal Output & Performance Improvements in Nx 13.5

    1 project | dev.to | 25 Jan 2022

Did you know that TypeScript is
the 1st most popular programming language
based on number of references?