ionic-framework: BUG in LazyLoading - Can't use custom components

Ionic version: (check one with “x”) [x] 3.x

I’m submitting a … (check one with “x”) [x] bug report

What I Did:

I’ve started a new app using ionic start app
I’ve removed all demo pages (including all references in the app.module.ts of course!)
I’ve created some pages. Using for example ionic g page welcome
I’ve set the main rootPage in app.component.ts to rootPage:any = 'Welcome';
I’ve started the app using ionic serve. Everything is fine. The welcome page shows up as expected.

=== UNTIL HERE EVERYTHING WORKS AS EXPECTED ===

I’ve created a custom component using ionic g component do-toolbar
I’ve imported the component’s module in the app.module.ts and added the reference to the import section.
I’ve added a <do-toolbar></do-toolbar> tag to the welcome page’s template.
The app is now broken and this error is shown:

Error: Template parse errors: 'do-toolbar' is not a known element

Current behavior: App crashes with error message as described above.

IMPORTANT: The custom components can be used perfectly if the pages, which rely on custom components, aren’t lazy loaded.

Expected behavior: Well, the component should be displayed.

Steps to reproduce: See What I Did above.

I’ve created a very simple app, demonstrating this bug. Please keep in mind, that all pages are loaded by the newly added lazy loading feature.

Ionic CLI Version $ ionic -v => 2.2.3

About this issue

@Eraldo I found the solution here: https://stackoverflow.com/questions/43507800/custom-component-in-ionic-v3/43514723

The idea is not to add the component in the ngModule and just import it in the .module.ts of the page you want to show the component.

Hope this helps.

I don’t know if what you are trying to do is supposed to work or not, but what I know does work:

define a DoToolbarModule module that declares and exports DoToolbarComponent
import DoToolbarModule in the modules of all lazily loaded pages that incorporate <do-toolbar> elements

Lazy load concept is pretty awesome but custom components are hard to integrate with pages. Needs a better and stable solution.

Here in Feb 2018 and using custom components or pipes on lazy loaded pages simply just does not work

@Eraldo Thanks that worked for me. I had spent far too long looking for a solution. The link does not work however. Use https://stackoverflow.com/questions/43507800/custom-component-in-ionic-v3