we are following the instructions from https://docs.google.com/document/d/1vGokwMXPQItZmTHZQbTO4qwj_SQymFhRS_nJmiH0K3w/edit which works… until today… for a component which is used in a popover (inside another component) I was getting an error (…could not find the module… make sure to include it in entrypoints) so after a couple of hours of fiddling around and pair coding, eventually I’ve created a normal module and imported it in the app.module.ts. That means that I have a single components.module.ts that import all the components except 1 which is imported in the app.module.ts.
The point that I’d like to make is that the code is getting very complicated and there is too much code to understand to do so little…
Is Ionic going in the traditional Java way with a lot of boiler plate ?
Your point here is very interesting, and I would first to clarify one thing here before digging down into details:-
In modern scripting languages you have two patterns FP (Functional Programming) and OOP (Object Oriented Programming), you can find details for this topic in this URL.
Ionic Platform is based on Angular 4 as it’s their core and Angular 4 is following the pattern of OOP (Object Oriented Programming) like JAVA programming but in some small differences, since Angular 4 are basically using Microsoft Typescript engine to make the OOP pattern happen.
Regarding your issue here in terms of code maintainability you have to read this article from Ionic team member Mike, in which he puts the lazy loading and the latest framework updates into great deal of understanding, in which you will choose your design pattern for the code you are writing and minimize the efforts as mush as possible for later code changes.
Reactive programming (e.g., Observables) feels much closer to functional programming than to OOP. Also, Dependency Injection is a way to get away from some structural problems created by OOP. If you program Angular/TypeScript asynchronously, I think it’s a lot closer to a strongly typed functional language than it is to an Object Oriented language. That’s the main theoretical reason I use interfaces instead of classes to define objects in Ionic. The flavor of the framework is to localize information and structure as much as possible. And that seems especially important if you implement lazy loading.
following the Option 2 from the that blog (https://github.com/mhartington/lazyLoad2-components/tree/common-modules) how do you use a component inside another coponent ?
If I export the component in components.module.ts I get "Error: No component factory found for MyComponent. Did you add it to @NgModule.entryComponents?". (adding it to entryComponents is not helping)
Similar error if I create a module for that component and import it in components.module.ts
I don’t see an “Option 2” in the link you provided, but I can tell you that at one point I had the strategy described in this post working for subcomponents.
Say SmallComponent is inside BigComponent. In big-component.module.ts import { SmallComponentModule } and declare that in the imports section of the @NgModule.
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:-
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)
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 …
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?