I currently have two projects: my-components, which is an Angular library, and my-showcase, an Angular app. Whenever I make changes or add a new component to my library, I commit it to a private git repository and publish it to a private npm registry. This allows me to use the updated components in other applications like my-showcase. Before committing and publishing, I always ensure proper testing of the components. Up until now, I have been creating and developing new components directly within my my-showcase project. Once completed, the component is then moved to my-components.
Currently, I import my angular component library from npm as follows:
import {TimePickerModule} from '@company/components';
For testing and development purposes, I switch this to a local file path:
import {TimePickerModule} from '../../../../company-components/projects/components/src';
However, I encounter the following error message:
WARNING in ../company-components/node_modules/@angular/core/fesm5/core.js 15153:15-36
Critical dependency: the request of a dependency is an expression
And:
core.js:12584 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[DcStickyBitsDirective -> ElementRef]:
StaticInjectorError(Platform: core)[DcStickyBitsDirective -> ElementRef]:
NullInjectorError: No provider for ElementRef!
It seems that the component from the library used in the my-showcase app is referencing the wrong node_module folder from my-components (particularly @angular/core), instead of the node_module folder from my-showcase.
Is there a solution to this issue, or am I misunderstanding something about working with Angular Libraries and NPM? Please provide assistance if possible.