I have a Angular 9 update! It works.
Opened this issue · 16 comments
I have an update in Angular 9. It works! Al least with a basic component library. I will update soon. Thanks alot for the author. Your idea was very useful
Hi could you share any update on this ? Looking for this approach in angular 9
Ok. let me prepare a new repo.
This is another repo: https://gitlab.com/riveroreyes/angular-load-dynamic-library-on-demand in Angular 9.0.1
@riveroreyes this works great, thank you! One question I've got is how to pass information from the parent application into the plugin. I would think it needs to happen somewhere in the router.service.ts while it's loading the module, but I haven't quite figured out a solution.
Any guidance would be great!
EDIT: Using a route resolver lets me access the data in the plugin module!
Hi. I did not get to test that option, since I preferred to work with angular elements, which allows me to pass arguments and emit events from the plugin in a simpler way, in this other case, from the component. Please review this repository in case you want to explore other alternatives. https://gitlab.com/riveroreyes/angular-9-1-0-microfronted-angular-elements
If you still want to continue working with the loading of dynamic modules, I would do it through the cookies, localstore or custom elements of DOM
@riveroreyes Thanks for sharing your solution. The route actually crash if i reload the browser. Did you faced the same issue and found a way to solve it ?
Hi. Let me know what project do you refer, please. In this project: https://gitlab.com/riveroreyes/angular-9-1-0-microfronted-angular-elements. I have no issues, but I just need to resolve some route redirection when I refresh the page. But the route doesn't crash. If you think it necessary I could review the repository.
@riveroreyes I built a small PoC with NxDevtool and Angular Library see Here. You can build the library using npm run build:ui and then run the using npm run start. If i click my button including routerLink it's works fine. But as soon as i reload the browser with the /ui as path it's navigate to the default route again.
I guess the main reason is that Angular doesn't know about the path at the beginning
Let me review your repo and I will comment it you later
Okay. I Checked and observed that the error of: the path that does not exist is correct, when refresh the page, because this path is not really loaded, but after pressing the button. Three options. (1) Add the route dynamically or (2) hide the error and (3) or redirect when the route does not exist, which is the correct option.
What do you mean by "Add the route dynamically" ? ... I will go for 1 and 3. How will you archieve dynamically added route ?
Yes. But not in a project like this. In another project, from a .json file
Here a example:
pages.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';
import { DataService } from '@services/data-service.service';
import { PagesComponent } from './pages.component';
import { DashboardComponent } from '../dashboard/dashboard.component';
import { ContactsComponent } from './contacts/contacts.component';
import { TaxDataComponent } from './tax-data/tax-data.component';
import { LocalsComponent } from './locals/locals.component';
import { ChildrenItem } from '@app/models/children-item.model';
import { AuthorisedLayoutComponent } from '@app/layout/authorised/authorised-layout/authorised-layout.component';
import { AddressesComponent } from './addresses/addresses.component';
import { MainComponent } from '@app/main/main.component';
const appRoutes: Routes = [
{
path: '',
component: AuthorisedLayoutComponent,
children: [ ],
},
];
const components = {
dashboardComponent: DashboardComponent,
addressesComponent: AddressesComponent,
contactsComponent: ContactsComponent,
taxDataComponent: TaxDataComponent,
localsComponent: LocalsComponent,
};
@NgModule({
imports: [RouterModule.forChild(appRoutes)],
exports: [RouterModule]
})
export class PagesRoutingModule {
constructor(private dataService: DataService, private router: Router) {
this.dataService.getMenu().subscribe(
(menu: any) => {
this.dataService.user.menu = menu;
const customRoutes = [];
const key = 'main';
if (this.dataService && this.dataService.user && menu
&& menu.navigation && menu.navigation[key]) {
menu.navigation[key].map((x: any) => {
const el: any = {};
el.path = x.path;
if (x.children) {
el.children = [];
x.children.forEach((child: ChildrenItem) => {
if (!components[child.component]) {
console.error(`Component: ${child.component} doesn't exists!`);
}
el.children.push({
path: child.path,
component: components[child.component]
});
});
}
if (x.pathMatch) {
el.pathMatch = x.pathMatch;
}
if (x.component) {
if (!components[x.component]) {
console.error(`Component: ${x.component} doesn't exists!`);
}
el.component = components[x.component];
}
if (x.redirectTo) {
el.redirectTo = x.redirectTo;
}
if (x.canActivateChild) {
el.canActivateChild = [components[x.canActivateChild]];
}
customRoutes.push(el);
});
}
customRoutes.forEach((x: any) => appRoutes[0].children.push(x));
this.router.config.forEach((child: any) => {
if (child.path === 'pages' && child._loadedConfig) {
console.log('LOADED CONFIG', child._loadedConfig);
child._loadedConfig.routes.forEach((x: any) => {
if (x.path === '') {
x.children = customRoutes;
}
});
console.log(child._loadedConfig.routes[0].children);
}
});
RouterModule.forChild(appRoutes);
}, error => console.log(error)
);
}
}
Ok Thanks.. i will give a try and see how i can get it works
I did not got it works after some try
@riveroreyes any idea on how to adapt your solution in this context ? I tried to register chunks ealier to make the route available at the bootstrap time without success. #13