How to use one component in other in Ionic with lazy loading?


#1

I have two components: ListPage and SearchSite. The second has selector: 'search-sites'. Before lazy loading I just put <search-sites></search-sites> in template and that’s all. After adding lazy loading I get error:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
‘search-sites’ is not a known element:

  1. If ‘search-sites’ is an Angular component, then verify that it is part of this module.
  2. If ‘search-sites’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component
    to suppress this message. ("

[ERROR ->]<search-sites (sitesLoaded)=“loadList()”
(siteChanged)=“loadList($event)”>

"): ng:///ListPageModule/ListPage.html@7:1 Error: Template parse errors: 'search-sites' is not a known element: 1. If 'search-sites' is an Angular component, then verify that it is part of this module. 2. If 'search-sites' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

SearchSite is declared in main NGModule file.


#2

I don’t believe that will work. I think you have to create a separate module for SearchSite that declares and exports SearchSite, and then import that module in the one for ListPage. Note that at the time of writing, AFAIK this will result in multiple copies of the code for SearchSite in your app binary (one for each lazily-loaded page that needs it).