Angular Component or directive matching' jhi-product-list' element is out of the current Angular module's scope

Question

I have 2 components Home component which is Home Page Product List component which will show me a list of products

Question : When I try to add product-list selector to home.component.html I get this error: Angular Component or directive matching' jhi-product-list' element is out of the current Angular module's scope

product-list.component.ts

import { Component, OnInit } from '@angular/core';
import {ProductService} from "../services/product.service";
import {Product} from "../entities/product";

@Component({
  selector: 'jhi-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss']
})
export class ProductListComponent implements OnInit {


  products! : Product[];

  constructor(private productService : ProductService) { }

  ngOnInit(): void {
    this.listProducts();
  }

  listProducts(){
    this.productService.getProductList().subscribe(
        data => {
         this.products = data;
      }
    )
  }

}

product-list.component.html

<p *ngFor="let tempProduct for products">

  {{tempProduct.name}}: {{tempProduct.unitPrice | currency:'USD'}}
</p>

Home.component.html

<div class="row">

<jhi-product-list> </jhi-product-list>

</div>

And Thank you.

Answer 1

An Angular CLI library is configured in tsconfig.json to refer to it's build output in dist folder. However, dist folder is automatically excluded, which causes generated metadata.json files to be excluded from indexing. Additionally dependencies from such a library are not treated as direct and are excluded from scanning as well.

The workaround is to mark library output in dist as "Not excluded":The image shows how to exclude a folder

Answer 2

Such an error may mean that your current module does not see the component. make sure you have correctly imported all your modules and components