How to import custom components generated by Ionic 3.5 CLI?

ionic ionic-v3
#1

The Ionic 3.5 CLI generates a custom component and puts the following in app.module.ts

@NgModule(
  declarations: [
    CustomComponent
  ],
)

Unfortunately, I got an error that, ‘custom-component’ is not a known element.

For the moment, I removed CustomComponent from declarations in app.module.ts and added the following to imports in each module that needs the component. This seems OK.

For example, in page.module.ts

@NgModule(
  imports: [
    CustomComponentModule
  ]
)

How to import custom components generated by Ionic 3.5 CLI?

I would appreciate your advice and suggestions.

Thanx.

#2

Beware that your app binary is going to contain a separate copy of all of CustomComponent's code for each page that imports it thusly.

#3

Thank you. I knew that from one of your other forum posts. Anyway, I think I make a mistake in app.module.ts

Before:

@NgModule(
  declarations: [
    CustomComponent
  ],
  imports: [
    PageModule
  ],
  entryComponents: [ ]
)

After:

@NgModule(
  declarations: [
    Page
    CustomComponent
  ],
  imports: [ ],
  entryComponents: [
    Page
  ]
)

It’s OK now. Thanks again.

#4

OK. It was fine with “ionic serve”, but now that I am ready for “npm run build --prod” I get:

[23:40:18]  ionic-app-script task: "build" 
[23:40:18]  Error: Type CustomComponent in 
            /src/components/custom/custom.ts is part of the declarations 
            of 2 modules: ...

As a result, I remembered why I had initially altered my imports.

Unfortunately, back to the original question.

How to import custom components generated by Ionic 3.5 CLI?

2 Likes
#5

I’ve got the same problem. Please somebody clarify.

#6

Same problem here. Are we supposed to import the component into each page individually? That doesn’t seem very efficient.
Also, if the intended behavior is to import each component.module at the page level, then why does the CLI import it to app.module by default? That is very confusing.
You could still achieve lazy loading by importing a reference to location of the piece of code for the specific component in app.module, and not actually loading it in memory.