TypeError: Cannot read properties of undefined (reading 'ɵcmp') Angular

Question

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.

Answer 1

We recently encountered a similar problem. In our case, it helped to use "forwardRef" in imports forwardRef(() => "component or directive")