Dismiss the necessity of imports in Angular

Question

Dismiss the necessity of imports in Angular

I am facing an issue with using a library in Angular, specifically the cubing npm package. This library is designed to run in both the browser and node environments, with specific code for each. I want it to run in the browser, but when compiling with Angular, it fails to find worker_threads. The library owner suggested ignoring this import as it's only needed for the node variant of the code.

However, I'm struggling to figure out how to make Angular ignore this import from the node module. How can I instruct Angular to disregard this import since we won't be using the code that requires it?

Error: Can't resolve 'worker_threads' in REDACTED/node_modules/cubing/dist/esm

If there's no direct solution, I might have to resort to patching the node_modules, but I'm hesitant about doing so due to potential challenges in getting it to work in production environments.

For additional context, here is the GitHub project (switch to branch scrambles for the issue at hand): https://github.com/Lykos/cube_trainer.git

Below are the most relevant files:

Package.json:

{
  "name": "cube-trainer",
  "private": true,
  "author": "Bernhard F. Brodowsky",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/Lykos/cube_trainer.git"
  },
  "engines": {
    "node": "16.x",
    "npm": "8.x"
  },
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --configuration production",
    "build_development": "ng build --configuration development",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "test_ci": "ng test --karma-config client/karma-ci.conf.js",
    "lint": "ng lint"
  },
  ...
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  ...
}

tsconfig.json

{
  ...
}

tsconfig.app.json

{
  ...
}

angular typescript npm

Answer 1

Answer №1

It appears that you have the option to exclude it in either the tsconfig or in the angular.json file, maybe consider trying both methods?

Exclude files from build in Angular 2

// tsconfig
{
   "exclude": [
       "node_modules/thepath/tothedependency/orfile/using/worker_threads/I_guess",
   ]
}

// angular.json
...
          "configurations": {
            "production": {
              "assets": [
                {
                  "ignore": [
                    "**/test.json",
                    "**/test"
                  ],
                },
...

Something similar could be done as well

You can also implement a browser wrapper for worker_threads and then adjust the angular build / webpack to replace the old import with the new one.

If you choose to make modifications, it may not be overly difficult. Creating a fork on github and installing from your fork is relatively simple. Alternatively, saving a git patch file for the change and automatically applying that patch during installation isn't too complicated either.

This type of adjustment tends to be challenging, even in esbuild and rollup scenarios.

You could also tweak your webpack configuration, which I believe ng build utilizes internally, by likely locating it in

/node_modules/angular/somejunk/config/webpack.config.json

and adding this:

Webpack ignore import

module.exports = {
  //...
  externals: {
    fetch: 'cross-fetch'
  }
};

However, this brings you back to applying a patch or utilizing a git branch

Answer 2

It appears that you have the option to exclude it in either the tsconfig or in the angular.json file, maybe consider trying both methods?

Exclude files from build in Angular 2

// tsconfig
{
   "exclude": [
       "node_modules/thepath/tothedependency/orfile/using/worker_threads/I_guess",
   ]
}

// angular.json
...
          "configurations": {
            "production": {
              "assets": [
                {
                  "ignore": [
                    "**/test.json",
                    "**/test"
                  ],
                },
...

Something similar could be done as well

You can also implement a browser wrapper for worker_threads and then adjust the angular build / webpack to replace the old import with the new one.

If you choose to make modifications, it may not be overly difficult. Creating a fork on github and installing from your fork is relatively simple. Alternatively, saving a git patch file for the change and automatically applying that patch during installation isn't too complicated either.

This type of adjustment tends to be challenging, even in esbuild and rollup scenarios.

You could also tweak your webpack configuration, which I believe ng build utilizes internally, by likely locating it in

/node_modules/angular/somejunk/config/webpack.config.json

and adding this:

Webpack ignore import

module.exports = {
  //...
  externals: {
    fetch: 'cross-fetch'
  }
};

However, this brings you back to applying a patch or utilizing a git branch

Dismiss the necessity of imports in Angular

Answer №1

Similar questions

Any idea how to resolve this typescript typing issue: "The argument, either a string or number, cannot be assigned to the parameter of type 'SetStateAction<string>'"?

Restrict the parameter type using a type predicate

Why is the data from an Angular service returning as undefined when I call it from a component?

typescript max recursion depth restricted to 9 levels

Bring in a function by its name from the ts-nameof package that is not declared in the d.ts export

The resolved link in the package-lock.json file is directing to a local artifactory URL rather than the globally specified registry

Sending various arguments within a single post request in Angular 6 and Node.js

Encountered difficulties when compiling the Angular application

Is it possible to write TypeScript and execute it directly with Node?

No pathways can be established within Core UI Angular

React-scripts is not recognizing tests that have the .tsx file extension

Expanding IntelliSense and helpful tooltips in VSCode for JavaScript and TypeScript by utilizing Node.js for a deeper understanding

`npm security check reveals a potential vulnerability related to Inefficient Regular Expression Complexity. For more information, refer to: https://github.com/advisories/GHSA-9vvw-cc

The HTML code is not displaying the value from the array

Typescript disregarding conditional statements

Attempting to implement a typeguard in Typescript that relies on the presence of specific content within an element

An issue occurred: Unable to access the 'login' property because of a TypeError

Angular is set up to showcase every single image that is stored within an array

Please enter data into the input fields provided in the text

I am encountering a problem with HttpClient Angular POST when trying to communicate with Google FCM Server. How can I