import { Component, OnInit } from '@angular/core';

    @Component({
        selector: 'app-shared-component',
        templateUrl: './sharedModule.component.html',
        styleUrls: ['./sharedModule.component.css']
    })

    export class SharedComponent implements OnInit {
        constructor() {}

        ngOnInit(): void {}
    }

    new ModuleFederationPlugin({
        name: "remote",
        filename: "remoteEntry.js",
        exposes: {
            './SharedModule': './src/app/shared/sharedModule.component.ts',
        },        
        shared: {
          "@angular/core": { singleton: true, strictVersion: true }, 
          "@angular/common": { singleton: true, strictVersion: true }, 
          "@angular/router": { singleton: true, strictVersion: true },
        }
    }),

	new ModuleFederationPlugin({
        remotes: {
            "remote": "remote@http://localhost:4300/remoteEntry.js",
        },
        shared: {
          "@angular/core": { singleton: true, strictVersion: true }, 
          "@angular/common": { singleton: true, strictVersion: true }, 
          "@angular/router": { singleton: true, strictVersion: true },
        }
    }),

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { SharedComponent } from 'remote/SharedModule';

    const routes: Routes = [
      {
        path: 'remote',
        component: SharedComponent,
        data: { from: ' Host' }
      },
    ];

    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }