Expose all your componets from remote as
// For remotes (please adjust)
name: "remoteapp",
filename: "remoteEntry.js",
exposes: {
'./remoteAppModule': './/src/app/remote/remoteapp.module.ts',
comp1Component: './/src/app/remote/comp1.component.ts',
comp2Component: './/src/app/remote/comp2.component.ts',
comp3Component: './/src/app/remote/comp3.component.ts',
}
And in your shell app create a placeholder component and lazy load your remote app's comp1/comp2/comp3 as
In Shell Route :
{
path: 'comp1',
component : PlaceholderComponent
},
{
path: 'comp2',
component : PlaceholderComponent
},
{
path: 'comp3',
component : PlaceholderComponent
},
PlaceHolderComponets looks like as :
@Component({
selector: 'my-placeholder',
template: `<div>
<header #header></header>
</div>`,
})
export class PlaceholderComponent {
@ViewChild('header', { read: ViewContainerRef, static: true })
headerContainer!: ViewContainerRef;
constructor(private injector: Injector,
private resolver: ComponentFactoryResolver,
private router: Router) {}
ngAfterViewInit(): void {
let compIndex = "";
if(this.router.url === "/comp1") {
compIndex = "comp1Componet";
} else if(this.router.url === "/comp2") {
compIndex = "comp2Component";
}else if(this.router.url === "/comp3") {
compIndex = "comp3Component";
}
loadRemoteModule(
{
type:'module',
remoteEntry : 'http://localhost:1003/remoteEntry.js',
exposedModule : compIndex
}
)
.then(module => {
const factory = this.resolver.resolveComponentFactory(module[compIndex]);
this.headerContainer?.createComponent(factory, undefined, this.injector);
});
}
}
Hope it will Works!
