Attempting to publish and install a unique angular2 component using NPM and Angular-CLI results in successful compilation only on the initial try

I am facing a peculiar and frustrating issue.

The problem revolves around an Ng2 component I have developed called via-date-picker. My goal is to publish it on NPM so that it can be easily utilized in other projects. To achieve this, I converted it into an Angular2 component library. The via-date-picker exports a module named ViaDatePickerModule, which I intend to import elsewhere.

To validate the publishing process, I NPM-install and import it into an empty Angular-CLI project dubbed npm-test.

Upon running my npm-test application using "ng serve," an error manifests:

ERROR in ViaDatePickerModule is not an NgModule webpack: Failed to compile

Despite this error, the project compiles successfully:

https://i.stack.imgur.com/vZeqq.png

Upon launching the project, everything functions as expected!!

However, this success is short-lived as subsequent attempts to run the project via "ng serve" result in the same compilation error, halting the compilation entirely:

https://i.stack.imgur.com/l39Rr.png

The reason behind this error and the intermittent behavior of Angular-CLI perplex me.

I have exhausted all avenues in search of a solution for this error, including:

  • Making adjustments to the tsConfig settings in my component library
  • Using rollup.js instead of gulp.js for building the component library
  • Cloning existing functional component libraries and replacing the code meticulously
  • Downgrading and upgrading Angular CLI
  • Downgrading and upgrading Typescript
  • Deleting and reinstalling node_modules multiple times
  • Restarting my project from scratch twice

Regardless of my efforts, the webpack error concerning ViaDatePickerModule persistently resurfaces. I'm at a loss for further ideas. Any assistance provided would be immensely beneficial.

For comprehensive transparency, I have created a public repository on GitHub here containing all pertinent files divided into two main directories:

  • COMPONENT_BEFORE_PUBLISHING: housing the component library undergoing "npm publish"
  • WHAT_IS_IMPORTED_INTO_NODE_MODULES: encompassing the resulting directory imported into the node_modules directory of my npm-test project

Any support extended towards resolving this issue would be greatly appreciated. I express my eternal gratitude in advance.

angularjsangularnpmangular-clinpm-install

Answer №1

If you are confident that every single one of your customers will import your components, modules...etc from a TS project like angular-cli, you have the option to publish your TS source directly without transpiling. This means you would be sharing static .ts files that can be brought into any project and transpiled there.

On the other hand, if you want your library to also function as a JS es5 or es6 module, it is advisable to transpile.

You might also consider using the angular compiler ngc instead of tsc? ngc serves as a wrapper for tsc and could be a good starting point. There are various library starters available to assist in creating an angular library optimized for AOT compilation.

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

Exploring the Benefits of Utilizing Cypress to Verify Form Fields and Manage Errors within Angular (version 13.3.0)

Recently started using Cypress with Angular version 13.3.0 and facing a validation issue with a form. Upon clicking a button, the form opens displaying various validation rules like 'First Name is required', 'Last Name', 'Gender&ap ...

angularvalidationtestingcypress

Error Encountered when Installing NPM and Using Authy API in NodeJS

After successfully setting up Authy on my Nodejs app, I encountered a sudden issue with error messages popping up from within the plugin. It seems like there might be a problem with the copy module, even though running npm install copy and npm update copy ...

node.jsnpmauthy

Is there a way to turn off the backdrop of angular material2's side nav?

I'm new to using Angular Material and I am looking for guidance on how to disable the backdrop of a side nav. I have created a working example on Plunker but the backdrop is still enabled. You can view it here. Here's what I've tried so far ...

angularangular-materialangular-material2

Max call stack size exceeded error encountered and logged without catching

While attempting to display multiple markers on a Google map within the Ionic framework, I encountered an Uncaught RangeError: Maximum call stack size exceeded error message in the log. The issue seems to be related to the Cordova Google plugin that I am ...

htmlangularjsgoogle-mapscordovaionic-framework

Tips to store Google fonts in the assets directory

I've included this link in my styles.scss @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); While it works locally, the API fails on production or is blocked. How can I host it within my p ...

javascriptcssangulartypescriptsass

Wait for the successful $save in AngularJS before redirecting

How can I redirect to my list page after POSTing a form if there are no errors and the data is successfully saved in the database? app.controller('NoteCreateController', ['$scope', 'Note', '$routeParams', '$l ...

angularjs

The functionality of the Angular application is not compatible with Edge browser

Encountering an issue with loading my dashboard on Edge (works fine on Chrome). The page fails to load, unlike in Chrome. The problem seems to be linked to the code snippet ColorScale.js.pre-build-optimizer.js: /** * Set up color sca ...

angularinternet-explorernpm

I'm looking for a way to retrieve an object from a select element using AngularJS. Can

I am working with a select HTML element that looks like this: <select required="" ng-model="studentGroup"> <option value="" selected="">--select group--</option> <option value="1">java 15-1</option> <option value="2">ja ...

javascripthtmlangularjs

Having trouble with your Angular CLI project after attempting to duplicate it by copy and paste?

As a newcomer to Angular, I've recently embarked on creating a new project using the Angular CLI. Everything was going well until I decided to upload my work to GIT. After copying and pasting the project folder contents into another directory, I encou ...

node.jsgitangular

Utilizing Local Host with Cordova Android Emulator: A Guide

I'm currently working on an application that utilizes a rest API. The backend for this application is hosted on my local machine, and I have the following entry in my /etc/hosts file: 127.0.0.1 api.mail.my Within the application code, I've de ...

androidangularjscordova

Is OnPush Change Detection failing to detect state changes?

Curious about the issue with the OnPush change detection strategy not functioning properly in this demonstration. My understanding is that OnPush change detection should activate when a property reference changes. To ensure this, a new array must be set e ...

javascriptangulartypescriptrxjs

Utilizing AngularJS to retrieve associated information from users via a JSON API

I'm currently utilizing the Ionic framework and my inquiry relates to AngularJS. I've set up a JSON API using Ruby on Rails and for authentication, I've opted for ng-token-auth + devise-token-auth. User JSON: { "data": { "id": "1", ...

ruby-on-railsangularjsjsonapiionic-framework

Incorporating CodeMirror into Angular2 using TypeScript

I've been working on integrating a CodeMirror editor into an Angular2 project, but I'm encountering some issues with the instantiation of the editor. Here is my code snippet: editor.component.ts import {Component} from 'angular2/core' ...

typescriptangularcodemirror

What is the best way to handle closing popups that have opened during an error redirection

In my interceptor, I have a mechanism for redirecting the page in case of an error. The issue arises when there are popups already open, as they will not automatically close and the error page ends up appearing behind them. Here's the code snippet re ...

angulartypescriptredirectpopupwindow

Package name "@nx-cloud" is invalid as it does not meet the requirements for Nx 16

Whenever I attempt to install a package in my project, I encounter the following error message: Invalid package name "@nx-cloud" of package "@[email protected]": name can only contain URL-friendly characters. Could this issue be ...

angularnpmnpxnrwl-nxnx.dev

Angular: efficiently sorting and selecting items from an array

In the process of developing an application, I am implementing a feature where users can filter items by clicking on category buttons. Many items have multiple categories assigned to them. By selecting specific category buttons, an array is generated with ...

angularjsangularjs-filter

How to implement a distinct click event for input elements containing a pipe character in Angular

I have developed an innovative Elevator application that features a unique elevator component displaying the current floor value in a box. You can see how it looks here: https://i.stack.imgur.com/h3JW5.png In order to replace the numerical floor values w ...

angular

What is the best way to refine the dataSource for a table (mat-table) using ngx-daterangepicker-material?

I am facing a new challenge and feeling unsure about how to approach it. The issue at hand is filtering a table based on the date range obtained through the ngx-daterangepicker-material library. This library triggers events that provide a start date and a ...

angularangular-materialobservableangular-material-tablengx-daterangepicker-material

Is NPM enterprise necessary for Angular2 and Java development?

Is an NPM enterprise version necessary if I plan to utilize Angular2 with Java as the backend technology for developing applications within my organization, without using Node JS or NPM server? ...

javaangularnpm

Having trouble with Angular ngRoute functionality?

I'm currently working on configuring a basic Angular app. Here is my main HTML: <html ng-app="CostumerApp"> <head> <title> Customers </title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstr ...

javascriptangularjsngroute