Doubt about lazy loaded components

@Xiwi I’m not sure what you mean with a component accessing another.

If you mean accessing through javascript, you can just inject ElementRef in the component you can go through the whole tree of elements with HTMLElement.parent. Similarly, you could go to all childs from the topmost <html> tag to every component, after all, it’s just javascript.

I advise agains such approach, though, except in very specific cases (normally in directives, like a focus directive).

About @Input() parent, I don’t know how you would use that (you could pass the elementRef.nativeElement of B to C through it, but it could make your code messed up, and I consider that is better to avoid this kind of bidirectional dependency).

If you are talking about including the component tag in the template (html) of another, in the example above, AModule imports only BModule so A can only use the tag <component-b>. The component B can use D. The components C and D cannot use any custom component, because their modules don’t include any other modules that exports a component. If component D needs to use component E (include it in the HTML template), you should import EModule inside DModule, and so on.


About Ionic4, if you are starting your project now, it could be better to use it from the start (but of course, take in mind that it’s still in beta). They say that the transition should be smooth, but if your app is not trivial, uses lazy loading, and has a good amount of custom css, that transition can be very painfull (especially because of navigation and CSS).

They haven’t deprecated @IonicPage with lazy loading, but removed it entirely, so the navigation needs to be changed entirely if you use lazy loading, and the CSS uses shadow DOM with CSS4 that is good in a way (encapsulation), but if you have custom css that can’t be applied to the ionic component through a variable, you would need to open a issue or PR about it and be on your own until they add it (if they add).

If you don’t use lazy loading (for performance) nor custom CSS in ionic components, then you should be good, but you said your project will be large, so both of these will probably happen.

Yes, I was talking about accessing them from below components classes.

I’ve got plans to move ASAP to Ionic 4 but I wanted to make this lazy loading first of all and then upgrade but I also want to wait till a release comes up. I already started playing with it (https://github.com/erperejildo/ionic4-angular6) but I found that they need to fix some stuff that I need (https://github.com/ionic-team/ionic/issues/14566#issuecomment-416243089).

About my issue in particular with the translations I found something here (but I need to keep looking into this because doesn’t work to me): https://ionicframework.com/docs/developer-resources/ng2-translate/#lazy-loading-pages.

Thanks for the info dude, this really helps me out!