Exploring ways to incorporate conditional imports without the need for personalized webpack settings!

Our project is designed to be compatible with both Cordova and Electron, using a single codebase. This means it must import Node APIs and modules specific to Node for Electron, while ignoring them in Cordova. Previously, we relied on a custom webpack configuration that used an environment variable to determine whether to treat the Node components as 'externals' for Cordova or to 'require' them for Electron. However, with our migration to Angular 9, integrating the builder required to run a custom webpack script (@angular-builders/custom-webpack) with the Ionic dev server builder (@ionic/angular-toolkit:cordova-serve) seems like a daunting task. Is there a way to achieve this without using a custom webpack script?

angulartypescriptionic-frameworkwebpackelectron

Answer №1

After much exploration, I stumbled upon the revelation that Webpack offers a hidden gem called __non_webpack_require__(), essentially acting as a runtime stand-in for require. This discovery opened the door to crafting a clever workaround for maintaining type safety with TypeScript:

declare function __non_webpack_require__(path: string): any;

import * as node_hid_typeonly from 'node-hid';
let node_hid: typeof node_hid_typeonly;
try { node_hid = __non_webpack_require__('node-hid'); } catch { }

Here's what this snippet accomplishes:

  1. Informs TypeScript about the existence of __non_webpack_require__()
  2. Imports node-hid solely for type annotations (as tsc can exclude imports used purely for typing purposes)
  3. Attempts to import node-hid into a variable defined with the correct type

This setup allows you to write code like this:

private device: node_hid_typeonly.HID;

and later on,

this.device = new node_hid.HID(path);

We've even managed to repurpose this technique in a non-webpack environment by incorporating:

global['__non_webpack_require__'] = require;

within index.ts before importing anything reliant on __non_webpack_require__.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Angular2 Router directs the user to the main Component

After configuring the Angular2 router and setting up the server (asp.net core) to redirect unknown paths to /index.html, the routing appears to be functioning properly. However, I am encountering an issue where visiting a specific URL (i.e. www.sitename.co ...

routesangular

Sharing content on an Angular 4/5 webpage

I find myself in a situation where I am required to share a link to my web application with a client, and they will be submitting a form on my webpage. This application has been developed using Angular 5. Despite searching online for a solution, I have not ...

angularpostangular5form-submitform-data

The execution of a new observable is delayed by using RxJS's switchMap

I've encountered a challenge in my Angular project where I need to handle HttpClient calls and depending on the response from the first call, decide whether to make another call with a delay. I am familiar with using the switchMap operator for this pu ...

angularrxjs

Mastering the proper implementation of OneToMany and ManyToOne relationships in MongoDB involves understanding and utilizing the

I am currently working on setting up a oneToMany, ManyToOne relation method and here is my progress so far (pseudocode provided below). I am using Typegoose which is essentially Mongoose with types. If you are unfamiliar with it, that's okay because t ...

mongodbtypescriptmongoose

Terminal displays Typescript variable syntax error

Recently, I've been delving into TypeScript using Visual Studio Code. However, I've encountered a perplexing syntax error that stems from how I've defined a variable. Here's an example of my declaration: let year:number = 2015 My term ...

node.jstypescriptterminalvisual-studio-code

Concealing forms within an Angular 5 application

I'm currently working on displaying the terms of use on the initial screen along with two buttons. If the user clicks the accept button, they will be directed to the authentication form. However, if they click refuse, the "Refused Terms" screen will a ...

angularhtmltypescript

Angular application parametrization

My application consists of an Angular front-end, an app layer, and a DB layer. The architecture can be seen in this image. To serve the JS front-end bits to the client and proxy requests from the client to the app layer, I am using an nginx instance. If I ...

javascriptangulartypescript

`Inconsistencies in console.log output with Angular Firestore``

I'm currently working on retrieving the id of selected data, but when I test it using console.log, it keeps outputting twice. The image below illustrates the console.log output. https://i.stack.imgur.com/IARng.png My goal is to fetch the id once and ...

angulartypescriptgoogle-cloud-firestore

The Angular material checkbox has a mind of its own, deciding to uncheck

I am having an issue with a list displayed as checkboxes using angular-material (Angular 7). Below, I will provide the code snippets for both the .html and .ts files. Every time I click on a checkbox, it gets checked but then immediately becomes unchecked ...

htmlangulartypescriptangular-material

Troubleshooting path alias resolution issue in NextJS when using Typescript with index.ts files

I keep receiving a TypeScript warning stating that the module cannot be found. This issue has surfaced while I'm utilizing TypeScript in my NextJS application, particularly when using custom paths. Previously, this problem never arose. My project st ...

typescriptnext.js

Steps for creating an Angular project and deploying it to the server

After integrating Angular Universal into my project, I noticed that two new files called 'browser' and 'server' were generated during the build process. However, I am unsure of how to properly upload these new files to the server compar ...

angularangular-universal

Why doesn't the primitive value get updated in Angular Service?

I've been exploring the functionality of Angular Services, and I'm encountering an issue with the heroCounter (number) not updating correctly while the hero array does. When I add a new dummy hero, I expect the heroCounter to increment accordingl ...

angularangular-servicesinjectable

Disabling an anchor using the 'disabled' property is proving to be a challenge for me

I'm attempting to dynamically enable or disable an anchor element based on the user's role. So far, I've tried a few different methods: document.getElementById('myBtn').disabled = true; However, this returns an error: The propert ...

javascriptangulartypescript

Refreshing the page does not trigger Angular callHooks

Encountering an issue with the proper invocation of F5 button or directive call URL from the address bar resulting in ngOnInit not being triggered correctly. Using a debugger to analyze the situation, it was noticed that callHook is not initiated after ngO ...

angulartypescriptngoninit

Transform a 3D text rotation JavaScript file into an Angular component tailored TypeScript file

I have a javascript file that rotates text in 3D format, and I need help converting it into an Angular component specific TypeScript file. You can find the codepen for the original JavaScript code here. Below are my Angular files: index.html <!doctyp ...

javascripthtmlcssangulartypescript

I am eager to learn how to integrate the "fs" module from Node.js into an Electron project powered by Angular

As I venture into writing my first desktop app using Electron and Angular5, I have encountered a roadblock while working with the fs module. Despite importing fs correctly (without errors in Visual Studio Code and with code completion), I faced an issue wh ...

node.jsangulartypescriptelectron

Is there a way to execute my asynchronous function within a loop?

After numerous attempts to run an async function that sends a post request to the server and logs the response in the console, I'm still facing issues. Despite looking at similar questions on stackoverflow, nothing seems to be resolving my problem. N ...

node.jsangularjshttpionic-framework

The NPM command fails to execute the Webpack script, yet it successfully runs when manually entered into the terminal

Working on my project with Electron-React-Boilerplate, I encountered an issue while running npm run build-renderer. Despite the script appearing to finish, I receive an error. If I manually enter the code related to the build-renderer script in the termin ...

javascriptnode.jsnpmwebpack

Getting the Final Character from a TypeScript String Constant

Can we extract the final character from a string without using the entire alphabet as an enum? Right now, I'm focusing on numeric digits. I'm somewhat puzzled about why my current approach isn't yielding the correct results. type Digit = &a ...

typescript

Adjust each module import to accommodate a singleton dependency

I encountered a scenario in my application that involves the use of an ApiModule: Within this module, there are two services - ApiRouteService and ApiRouteLoaderService, both scoped to the module itself. The purpose of these services is as follows: ApiRo ...

angular