I have created a custom ui library using only standalone components and here's my public-api.ts file.
/*
* Public API Surface of ih-ui-lib
*/
export * from './lib/ui-lib.service';
export * from './lib/ui-lib.component';
export * from './lib/ui-lib.module';
// Exporting components
export * from './lib/components/card/card.component';
export * from './lib/components/card/card-heading/card-heading.component';
export * from './lib/components/card/card-content/card-content.component';
export * from './lib/components/cards-responsive/cards-responsive.component';
export * from './lib/components/collapsible/collapsible.component';
export * from './lib/components/heading/heading.component';
export * from './lib/components/icon/icon.component';
export * from './lib/components/paragraph/paragraph.component';
export * from './lib/components/pill/pill.component';
export * from './lib/components/scrollbar/scrollbar.component';
export * from './lib/components/search/search.component';
export * from './lib/components/search/components/search-column/search-column.component';
export * from './lib/components/search/components/search-row/search-row.component';
export * from './lib/components/status-bar/status-bar.component';
export * from './lib/components/timeline/timeline.component';
Here's a example of a component:
import { Component, Input, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'card',
standalone: true,
imports: [CommonModule],
templateUrl: './card.component.html',
styleUrls: ['./card.component.css']
})
export class CardComponent implements OnInit {
@Input() classes: string = '';
@Input() width: string = '';
@Input() radius: string = 'sm';
constructor() { }
ngOnInit(): void {
}
}
Here's how I'm adding to my app's package.json
"ui-library": "git+repo+url.git#branch",
I also have index.ts file at the root of my lib which just exports the public-api.ts file so I can access it from the root.
export * from './dist/ih-ui-lib/public-api';
I created a new standalone component in my app and tried to import that component into my app.
And that is when I get this error: TypeError: Cannot read properties of undefined (reading 'ɵcmp')
I'm using angular 16.
I tried using modules for components and still it is the same. I tried importing standalone component to a module in my app and it failed to recognise that component.
You need to build the library and publish the build result as an npm package. From the docs:
Use the Angular CLI and the npm package manager to build and publish your library as an npm package.
ng build my-lib
cd dist/my-lib
npm publish
Installing your library via git repository does not work, because this is just the source code for the library, but you need a built library.