I have few angular libraries which displays a set of components and its related logic resides in it.
I have an angular app, in which I want to make use of the above libraries to display the components inside a container. For this to work, I have a routes as shown below
export const APP_ROUTES: Routes = [
{
path: 'page',
component: PageComponent,
children: [{
path: '',
component: AppComponent
}, {
path: ':pageName',
component: PageWrapperComponent
}
]
},
{path: ‘logs’, component: LogsComponent}
];
In this, pageComponent is the angular component created inside the angular app. Whereas, PageWrapperComponent is from the library. Also, AppComponent for empty path is coming from the library itself. These libraries are added to the package.json and imported.
Inside PageWrapperComponent, I have the logic to load the page, based on route params.
ngOnInit() {
this.ngZone.run(() => {
this.subscription = this.route.params.subscribe(({pageName}: any) => {
this.loadPage(pageName);
});
});
}
loadPage method with generate the component dynamically and render the view. But here, when I’m rendering a component using createComponent on componentRefProvider, constructor are invoked but none of the ngOnInit or any angular component lifecycle hooks are triggered.
Why are the hooks not getting called in this case? Above pageWrapperComponent ngOnInit was invoked. Is it something because of adding navigation from the libraries ?
Thanks