bizar… they are github diffs and I’ve just tested them with an incognito windows and they works fine here…
Say SmallComponent is inside BigComponent. In big-component.module.ts import { SmallComponentModule } and declare that in the imports section of the @NgModule.
Follow this. Worked for me.
2 Likes
My friend the concept is simple when you are following the option 2 from the blog we have shared it means that you will define all of your modules in one component ng module file, in which this file will exports all your custom components under a common name you define in your definition file, and then use this custom name to add it to the imports ngmodule file for the component you are using.
For example you have two custom components PicTaker & AudioRecorder, your ngModule file that will define your module would be;-
import { PicTaker } from '../../components/PicTaker';
import { AudioRecroder } from '../../components/AudioRecorder';
@NgModule({
declarations: [YOUR_CUSTOM_COMPONENT_NAME],
imports: [
PicTaker,
AudioRecroder],
exports: [YOUR_CUSTOM_COMPONENT_NAME]
})
export class YOUR_CUSTOM_COMPONENT_NAMEModule { }
Then in the other part of the app in your page you would like to use it and import it in your ngmodule for the page component like below:-
import { YOUR_CUSTOM_COMPONENT_NAMEModule } from '../../components/YOUR_CUSTOM_COMPONENT_NAMEModule';
@NgModule({
declarations: [CustomPage],
imports: [
YOUR_CUSTOM_COMPONENT_NAMEModule,
IonicPageModule.forChild(CustomPage)],
exports: [CustomPage]
})
export class CustomPageModule { }
you can check this link project from Mike as well for more details
1 Like
My friend, I understand that and it works. The problem I’m having is when a component A needs another component B. The only way I’ve managed to make it work is to define the component B (needed by the component A) in the app component… see my git diff that I’ve sent before… or this new diff where I’m adding a hello component that opens a popover… I’m just trying to use a popover inside a component. (the popover needs another component)
What am I doing wrong ?
yep. you can see it in this commit
I’ve created a module for the subcomponent (in this case is the content of a popover) and included it in the components.module.ts (effectively merging the two approaches). Same problem,
Uncaught (in promise): Error: No component factory found for PopoverComponent. Did you add it to @NgModule.entryComponents?
I’m just trying to add a simple hello component that opens a popover to the official example …
Try removing entry components, im using popover module myself and it works for me.
I guess I’m not seeing the benefit in having a monolithic “components” module. Can you get whatever it is you’re trying to do working with just having one module per component?
1 Like
this implementation works, but, if you have ‘events.subscribe’ at page where you use that component, events does not work any more.
Example:
following your example, if you add to my-page.ts :
constructor(events: Events) {
events.subscribe(’[gallery]DeviceSelected’, (item) => {
** console.log("[Event catched] '[gallery]DeviceSelected]");**
** });**
}
and push to another page:
this.navCtrl.push(this.gallery …
where actually fire’s the event:
this.events.publish(’[gallery]DeviceSelected’, item);
the subscribe never catch the event.
If you remove:
MyCustomComponentModule from my-pages.module.ts,
the subscribe at my-page.ts catch the event without problem.
I’ve not idea how fix it.
My bad,
I Had
@NgModule({
declarations: [
ImageCardComponent
],
imports: [
IonicModule.forRoot(ImageCardComponent),
],
exports: [
ImageCardComponent
]
})
export class ComponentsModule {}
at ‘components.module.ts’ and it should be:
IonicPageModule.forChild(ImageCardComponent),
Sorry
1 Like
Thanks, in my case I was missing importing the IonicModule