What steps can I take to ensure that Angular is pleased with the npm packages I create? Avoiding dependencies in the "CommonJS or AMD" format to prevent optimization issues

Before I delve into the topic of

"allowedCommonJsDependencies"
, let me clarify that my goal is to create an npm package that can be seamlessly utilized by both Angular and non-Angular projects, without any warnings needing to be suppressed.

The npm package I have developed already includes modules in ESM format, as well as CommonJS (and even minified UMD). It offers versions in both ES6 (ES2015) and ES5 code. Below is a snippet from my package.json file:

{
  "name": "@tubular/util",
  "version": "3.3.0",
  "description": "Miscellaneous utility functions",
  "browser-es5": "dist/web5/index.js",
  "browser-es6": "dist/web/index.js",
  "main": "dist/es5/index.js",
  "module": "dist/index.js",
  "es2015": "dist/es6/index.js",
  "esm2015": "dist/index.js",
  "typings": "dist/index",
  "sideEffects": false,

The content of dist/index.js file is as follows:

export * from './browser-graphics-util';
export * from './browser-util';
export * from './misc-util';
export * from './string-util';

All the exported code above is written in ESM style, using import instead of require.

Hence, I am puzzled as to why Angular is flagging issues with the CommonJS code when it should ideally utilize the ESM code seamlessly. There should be no necessity for any warnings to be addressed.

You can access the complete source code here: https://github.com/kshetline/tubular_util

Answer №1

Discovering Angular's method for selecting code from an npm package was a bit of a mystery until I reached out on Github and got some clarification. It turns out that Angular follows this hierarchy:

  • es2015
  • browser
  • module
  • main

Surprisingly, the 'esm2015' property is not considered in this process, even though it seems like the logical place for ESM-style code. It was a misconception on my part, thinking that 'es2015' excluding the 'm' would not be ESM code.

Lesson learned!

In order to align with Angular's preferences, I adjusted my package.json file accordingly, keeping all code directories intact:

{
  "name": "@tubular/util",
  "version": "3.3.1",
  "description": "Collection of miscellaneous utility functions",
  "browser": "dist/web/index.js",
  "browser-es5": "dist/web5/index.js",
  "main": "dist/es6/index.js",
  "main-es5": "dist/es5/index.js",
  "module": "dist/index.js",
  "es2015": "dist/index.js",
  "typings": "dist/index",
  "sideEffects": false,
}

By making these adjustments, Angular now has the ability to optimize and efficiently tree-shake as needed.

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

A generalized function that provides IEntity[E][S] as its return type, delving into two levels of

I've encountered a compilation/type error while attempting to implement something similar to the code snippet below. interface IEntityLookup { [Entity.PERSON]: IPersonLookup [Entity.COMPANY]: ICompanyLookup } interface ISubEntity { [Entit ...

The process of retrieving information from an AngularFire2 function

I am facing an issue while trying to create a variable using a function from AngularFire2. The function I am using is authorizeUser(). However, when I try to assign the result of this function to this.user, the console window displays 'undefined' ...

Unknown Angular component identified

I'm currently working on an application with the following structure: app |-- author |-- |-- posts |-- |-- |-- posts.component.html |-- |-- author.component.html |-- |-- components |-- |-- tag |-- |-- |-- tag.component.ts |-- home |-- |-- home.comp ...

Angular 4 is in need of CORS support

I have a server application with CORS enabled, which works well with my AngularJS client (1.x). However, I am now upgrading to Angular 4 and encountering the following error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the rem ...

Can dependency injection be implemented while utilizing the new operator?

My goal is to incorporate a strategy pattern into my program. Specifically, I want to be able to determine at runtime which class to create an instance of. Implementing this may seem straightforward at first: if(...) { this.service = new ServiceA(); } el ...

Error message VM9623: ReferenceError - 'process' is undefined in Visual Studio Code

I'm currently working on developing a React App using VSCode and Google Chrome. An issue I'm encountering is that every time I save changes in my React app on VSCode, it automatically refreshes the Chrome page. However, it adds an overlay iframe ...

'value' is connected to every single hook

Every time I try to save my work using any hook, the 'value' field changes automatically. This has been causing me a great deal of stress. I would be extremely grateful if someone could assist me with this issue. click here for image description ...

Leveraging ES6 Symbols in Typescript applications

Attempting to execute the following simple line of code: let INJECTION_KEY = Symbol.for('injection') However, I consistently encounter the error: Cannot find name 'Symbol'. Since I am new to TypeScript, I am unsure if there is somet ...

Developing a compilation of connected parts

I'm currently working on an app that displays a hand of cards which can be changed by clicking on them. Within this app, I have created two components - one for the hand and another for the individual cards. In the hand.html file, I use the followin ...

Retrieve the initial array from the object that has a size of X

As part of my web app development process, I am utilizing the xlsx library to import data from an excel file. Each row from the excel sheet is being saved into an object that contains arrays with a length corresponding to the number of cells in each row. T ...

Is there any practical interchangeability between yarn and npm?

I have a project that includes a package.json file and an installation script that utilizes npm install as one of its steps. I am considering modifying the script to use yarn install if yarn is installed (to take advantage of yarn's caching, lockfile ...

Add a new class to the Custom Repository

In my project, I have developed a class called S3Service that handles the task of uploading and deleting objects (such as images) from S3. Since I intend to utilize this "service" in various modules, I decided to create a custom module named UtilsModule wh ...

Failure of Angular guard to retrieve information

Using the google maps API, I retrieve maxLat, maxLng, minLat, and minLng to fetch data from the database before generating the component, in order to optimize SEO meta tags and descriptions. The issue I encountered is that the guard resolves the data but ...

Struggling to link dropdownlist with an array fetched from my service - need assistance

One of my services includes a method that retrieves a list of employees: export class EmployeeService { private employeesUrl = 'http://localhost:portnum/api/employees'; getEmployees(): Observable<IEmployee[]> { return th ...

Yarn has unexpectedly installed two versions of jQuery. Can anyone explain why this occurred and suggest alternative solutions to resolve this issue without having to manually edit the

yarn add foo yarn add jquery-form yarn add <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85eff4f0e0f7fcc5b7abb7abb1">[email protected]</a> foo states "jquery@>=2.2.0 <3.0.0" as dependency, while jquery-for ...

Angular and JavaScript Performing Slide-Up Animation

Currently, I am working on creating a menu using Angular and JavaScript. My goal is to have this menu toggle between showing and hiding when a button is clicked. If you would like to view the code that I have written so far, you can check out the demo her ...

Nestjs: Step-by-step guide to removing a specific application from a Nestjs monorepo using nest/cli

Is there a method to delete a specific app within a nestjs monorepo using the nest/cli? I have searched through the documentation and developer forums but cannot seem to find a solution. ...

The NodeJS/nextJS application is experiencing difficulties running on a Windows operating system

I am currently building a nextJS app on my macOS system. After executing the npm install command, I transferred all the files to a Windows 10 machine, which unfortunately does not have an internet connection. To my surprise, when running npm run dev, it is ...

Utilize varied CSS files for distinct sections within two different subdirectories

In my Angular application, I have created two sub-roots under the main app root: websiteMaster and systemMaster. I want the CSS files of the website to be loaded only when a user is logged in, and the CSS files of the systems to be loaded only when a us ...

npm start is executing in the wrong directory

I am currently using Ubuntu version 14.04 and have created a node.js project in the directory /home/user/project_folder. Upon running the command npm start /home/user/project_folder/, I encountered the following error: npm ERR! node v4.6.1 npm ERR ...