"ERROR in Couldn't resolve resource from" for extensible angular component

Question

I made a extensible parent component in Angular.

@Component({
  selector: '',
  templateUrl: '',
})
export class AbstractPagerComponent {...}

and get compilation error :

"ERROR in Couldn't resolve resource from /this-path-is-ok/abstract-pager/abstract-pager.component.ts " I do not get what that error means because paths are ok and the component imported and added to a module.

Answer 1

after a few my-head-bangs on the wall and a calls to Cthulhu, I realized that this means that he does not have a URL pattern in the component.

so I resolve it by change templateUrl to template

@Component({
  selector: '',
  template: '',
})
export class AbstractPagerComponent{...}

Answer 2

I have found a solution related to this, create a new component from angular CLI within the same component folder( where you are getting errors), copy all of the logic, HTML code, and CSS files to this new component, and then delete the old component, now change the path and compile, hope this will help

Answer 3

The problem is that the compiler could not find your templateUrl

As an example, for the following path

abstract-pager/
├── abstract-pager.component.html
└── abstract-pager.component.ts

the component would be

import { Component } from "@angular/core";

@Component({
    selector: 'app-pager',
    templateUrl: './abstract-pager.component.html'
})


export class AbstractPagerComponent{

}