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

user_13018468 0
Viewed 2348

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.

angular-components angular-routing angular intellij-idea spring
2 Answers

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

1

user_130912540

You need to add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component and declaration that component in module like this:

import { ProductListComponent } from './product-list/product-list.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [ProductListComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ProductListModule {}
user_173593000
Related