'"Can't bind to (...)" and "(...) is not a known element" JS errors when Angular app rendered within a Liferay portlet
I have an Angular 9 app that I would like to make accessible via Liferay 7.x portlet.
When I follow these steps, deploy my portlet and try to render it, I run into issues (reported as JavaScript errors in the browser console):
A. "Can't bind to 'X' since it isn't a known property of 'Y'.
B. "'X' is not a known element:
- If 'X' is an Angular component, then verify that it is part of this module.
- If 'X' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message." The problem is that as far as I can see the modules in question are properly annotated and listed as exports, declarations, etc.
I would appreciate help with resolving these issues. I am happy to jump on a Zoom to demonstrate the details of my config.
Thank you!
Solution 1:[1]
You can find the answer here: https://angular.io/guide/ngmodule-faq#what-does-cant-bind-to-x-since-it-isnt-a-known-property-of-y-mean
What does "Can't bind to 'x' since it isn't a known property of 'y'" mean? This error often means that you haven't declared the directive "x" or haven't imported the NgModule to which "x" belongs.
Perhaps you declared "x" in an application sub-module but forgot to export it. The "x" class isn't visible to other modules until you add it to the exports list.
Solution 2:[2]
My problems were related to the fact that:
- The these steps ask to remove "selector" properties, which is incorrect. When I restored the "selector" properties the problem #1 went away
- I was ineed missing some module references (problem #2)
Hopefully this helps others, too.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Zsombor Szende |
| Solution 2 | Piotr Woch |