Not sure how much info is needed, but I’ll start out small and add more if requested. Note that I am using the router to display pages.
Here’s my Custom Elements:
Element1.ts/.html
Element2.ts/.html
(both extend) ElementBase.ts
If I put Element1 and Element2 on the same page (in that order), I receive the following error messages in the console when I visit the page:
ERROR [app-router] Error: No Aurelia APIs are defined for the element: "ELEMENT2".
ERROR [app-router] Router navigation failed, and no previous location or fallbackRoute could be restored.
If I put each element on a separate page, there’s no problem visiting either one.
If I have the following:
Element1Page
Element2Page
Element1and2Page
If I visit Element2Page first, then visit Element1and2Page, I receive the errors:
ERROR [app-router] Error: No Aurelia APIs are defined for the element: "ELEMENT1".
ERROR [app-router] Router navigation failed, and no previous location or fallbackRoute could be restored.
Note that, if Element2 is now “defined” but Element1 is not. It’s as if whichever is initialized first, wins.
Finally, if I make a ElementBase1.ts and an ElementBase2.ts and have the respective elements inherit from them, it also poses no issue. It’s only when I attempt to have each inherit from the same class.
I tried creating an example on codesandbox.io by forking the Aurelia Javascript Sandbox, but was unable to even get routing to work.
TBH, I haven’t used inheritance in TypeScript or an Aurelia project before attempting this. Perhaps I’m going about this wrong in the first place and there’s a better way. Any ideas would be appreciated.