Connecting Angular modules via npm link is a great way to share common

Creating a project with a shared module that contains generic elements and components, such as a header, is my goal. This shared module will eventually be added as a dependency in package.json and installed through Nexus. However, during the development phase, I would prefer to npm link it from my local filesystem instead of following the "nexus way" every time I make changes to the shared module.

I have a couple of questions:

  • Is it possible to use Angular decorators (e.g. @Component or @NgModule) within this shared module?
  • What is the best way to import all the content from this shared module into my current project?

Answer №1

How do you ensure changes to a library are applied locally?

  • To update the library locally, create a folder in node_modules with the same name as listed in your package.json
  • Link this newly created folder to the folder where the local changes to the library are stored using npm link
  • In your typescript file, use a regular import statement to access the updated library

Despite these steps, reliability remains an issue. Therefore, it is recommended to utilize a monorepo for managing such situations.

The suggested tool for handling this is:

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

PhpStorm running sluggish following npm installation

Unfortunately, English is not my first language. After setting up a new Laravel project, I used composer install and npm install in iTerm. However, when trying to open the project in PhpStorm, the IDE was extremely slow. It took over an hour just to inde ...

Animating Angular ng-template on open/close state status

I am looking to add animation when the status of my ng-template changes, but I am unable to find any information about this component... This is the code in my report.component.html <ngb-accordion (click)="arrowRotation(i)" (panelChange)="isOpen($even ...

Oops! You can't switch to `multiple` mode on a select dropdown once it has already

Here's where the issue lies: This is the code I am referring to: <div fxFlex.gt-lg="100" fxFlex="100" *ngIf="requestAction == 'add'"> <div class="pb-1"> <md2-select plac ...

Showcasing a recently incorporated mat-card

I have a collection of mat-cards that are being displayed using data received through an observable called cars$. Each time a new car object is emitted by this observable, a new mat-card appears automatically. Is there a way to make the newly added mat-c ...

How to implement an instance method within a Typescript class for a Node.js application

I am encountering an issue with a callback function in my Typescript project. The problem arises when I try to implement the same functionality in a Node project using Typescript. It seems that when referencing 'this' in Node, it no longer points ...

Using TypeScript to style React components with the latest version of Material UI, version

Styled typography component accepts all the default typography props. When I include <ExtraProps> between styled() and the style, it also allows for extra props. const StyledTypography = styled(Typography)<ExtraProps>({}) My query is: when I r ...

React Typescript: The specified argument type cannot be assigned to the parameter type

Creating a Check Box Button React component has resulted in an error related to setRSelected(1) and setRSelected(2)... const [cSelected, setCSelected] = useState([]); const [rSelected, setRSelected] = useState(); const onCheckboxBtnClick = (selected ...

Encountering an ERROR during the compilation of ./src/polyfills.ts while running ng test - Angular 6. The module build

I encountered a problem in an angular project I am working on where the karma.config was missing. To resolve this, I manually added it and attempted to run the test using the command ng test. However, during the execution, an error message appeared: [./src ...

Numerous traditional commits of the `feat` type have been recorded on a single feature

I've recently joined a repository that leverages semantic-release for automating version updates of the NPM package. The repository follows the guidelines set by the Conventional Commits specification, however, the README is quite limited. If I creat ...

Set up and use Create React App without the need to publish it on NPM by forking

Instead of resorting to the traditional method of publishing the forked Facebook's Create React Repo on NPM for installation, my client and I are looking for an alternative solution. Both the forked Create React App and my React App repositories are c ...

A convenient utility for generating React components with pre-populated Tailwind CSS classes

When it comes to extracting local Tailwind-styled components, I tend to do it like this: const Container: React.FC = ({ children }) => ( <div className="bg-white px-5 py-5"> {children} </div> ); To simplify this process, I ...

Can you elaborate on the users object found in the npm registry JSON response?

When looking at the json response of any npm package, such as jQuery for example, http://registry.npmjs.org/jquery, you may come across a dictionary called users. This dictionary contains usernames as keys and boolean values as the corresponding values. ...

Error: `target` property is not recognized on `htmlelement` type

I am attempting to retrieve the ID of a list item in a select menu but I am having trouble getting the value from it. The value should be a number. HTML File <div class="form-group mt-3"> <label class="form-label">Produc ...

Vue encountered an error: TypeError - _c is not recognized as a function

I recently created an icon library in Vue using Vue-cli and vue-svg-loader, and then exported it as a package. However, when I tried to use the icons like this: <template> <div> <MyIcon /> </div> </template> <scri ...

Async Validator always returns false

I've implemented the validation function below: checkPasswordValidity(control: Control): { [key: string]: any; } { clearTimeout(this.timer); if (control.value) { let promise = new Promise((resolve) => { this.timer = set ...

An unexpected issue occurred while attempting to create a new Angular app using the command ng

Currently in the process of deploying my angular application and utilizing Infragistics. Following their Documentation, I used npm install Infragistics for installation. However, when I run ng new --collection="@igniteui/angular-schematics" I e ...

"Changing the name of a symbol that is automatically imported from an internal library in

Within my module, I find myself using the Element class that is implicitly imported from the "dom" internal library. However, I also need to create my custom Element class within the same module. This presents a problem due to the name collision and poten ...

How can this be happening? It's expected that items will be printed, but for some reason

I'm struggling to figure out why the console.logs aren't showing up. import { GenericRepository, getGenericRepository } from '../src/database/repository/GenericRepository'; import { start, stop } from '../src/index'; import r ...

Navigating within Custom Web Component Angular

Recently, I attempted to create a custom web component using Angular ngDoBootstrap() { const el = createCustomElement(ServicemainComponent, { injector:this.injector }); customElements.define('servicemain', el); } After building the component in ...

The incorrect sequence of Angular/Protractor functions is causing issues within the tests

Trying to extract the values from a column in a grid and compare them before and after sorting can be tricky. I have two functions set up for this task - one to retrieve the initial column values, and another to check the order post-sorting. However, there ...