I'm somewhat new to Angular versions post AngularJS and decided to give them a try. What I want to do is to build a library of UI components, and an application that will consume the said library. In my library, I decided to create the components as WebComponents, so following the tutorials I've found so far, I have something like
import { Injector, NgModule } from '@angular/core'
import { createCustomElement } from '@angular/elements';
import { MyButtonComponent} from './my-button.component'
@NgModule({
declarations: [MyButtonComponent],
entryComponents: [MyButtonComponent]
})
export class MyButtonModule {
constructor(injector: Injector) {
const myButton = createCustomElement(MyButtonComponent, { injector });
customElements.define('my-button', myButton);
}
}
For my custom component. If I add all the files (the module, the component, template and SCSS files) for my component directly to my application it works as expected, so I know my component declaration is right. However, if in my application I include the component from my library, when running my app with ng serve
, I see the error:
Error: StaticInjectorError(AppModule)[MyButtonModule -> Injector]:
StaticInjectorError(Platform: core)[MyButtonModule -> Injector]:
NullInjectorError: No provider for Injector!
I'm using Angular 6 and I have both projects running locally and I'm using ng-packagr
to bundle my library. I added @angular/core
and @angular/elements
as peerDependencies
in my library, and in my main app I had to add
"resolutions": {
"@angular/core": "6.1.4"
}
To solve the error cannot redeclare block-scoped variable 'ngDevMode'
(not sure if this is related or not). Initially I thought the injection error could be caused by this but I've added the preserveSymlinks
to my angular.json
file and I still have the error.
Any thoughts on what might be causing this?
UPDATE: If I copy the files manually from my library folder and paste them inside the node_modules
folder of my main app it works, which leads me to think it's something involve symbolic links.
to run karma with npm link
'ed library its required to add preserveLinks: true
in test
(builder-angular:karma
section) angular.json
:
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"preserveSymlinks": true,
// ...
I had the same problem, i solved it with the solution planted on that post: https://github.com/jvandemo/generator-angular2-library/issues/277
The problem happens When you apply the npm install command locally to a project library folder, the npm create a shortcut of the library and the error appears.
Another solution it's to you pack your library using "npm pack yourlibary" command and install the generated file with npm install at the target project
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With