Search code examples
angulartypescriptnpmangular-library

Angular - Add local external Module to App

I have a project my-components and a project my-showcase. my-components is an Angular library and my-showcase is an Angular app. At time, when I change or add an component in library, I make a commit to private git and publish to private npm. Then I can use it in other apps like my-showcase. Before commit and publish I would test it. Until now, I create and develop a new component in my-showcase. After finish, I put it to my-components.

At time I import my angular component library over npm:

import {TimePickerModule} from '@company/components';

For testing and development I change this to local path:

import {TimePickerModule} from '../../../../company-components/projects/components/src';

Unfortunately, I get 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!

Apparently the component from the library in app my-showcase use the wrong node_module folder from my-components (specially @angular/core), not the node_module folder from my-showcase.

Does anyone have a solution for me or have I a wrong understanding when dealing with Angular Library and NPM? If it was too incomprehensible, please let me know.

Solution

  • I have a workaround. I add following to tsconfig.json:

    "@company/components": [
    "../path/to/projects/components/src"
],

"@angular/*": [
    "node_modules/@angular/*"
]

    But I don't find this solution very clean. If I understand correctly, the problem is that Webpack takes the Angular stuff from the component library and not from the showcase project. With this workaround, it override the wrong paths.