Search code examples
angulartypescriptsassmicro-frontendangular-module-federation

angular micro front-end by module-federation

I wanna create micro front-end applications I have done it by module-federation and I followed this page guid

but I have a problem, I want to every project has own style.

when ever i redirect url from dynamic app to remote app, style.scss from remote app does not load and deacuse of this reason my styles do not work. can you help me how i can fix this problem

Solution

  • You can employ the proxy component strategy.

    1. Create a file named proxy.component.ts and set the encapsulation to ViewEncapsulation.None. encapsulation: ViewEncapsulation.None

    2. Create a file named proxy.component.scss and import all the styles you need into it. Then, set it as the styleUrls inside the proxy component Ts file. styleUrls: ['./proxy.component.scss'],

    3. Place all your remote MFE (Micro-Frontend) routes as children of the ProxyComponent in your the main router module using the following configuration:

      RouterModule.forChild([

      { path: '', component: ProxyComponent, children:

      [

      { path: '', component: SampleComponent // or lazily load the module of any page } ] }

      ])