Angular module federation webpack duplication

So I have 2 angular apps and I'm using webpack module federation to import one into the other I got it working but I'm encountering some strange behavior. I think the problem is the same or similar to this but there's no answer and it's been some time.

In my remote app I have a div below a table that is only there while I'm getting the data from the database and then it's hidden. When i go to the remote it works fine no problem but when i use the shell the div was not being hidden. I then added a button to toggle the div visibility but what happened was that the div os duplicated when the bool flag turn true and nothing when it turned false. I then used the shell from this github and changed the flight component to be exactly the same as my remote component and imported my component and it happens only on my component. This can be seen in this video.

I believe the problem is in the remote and not in the host.

Host webpack.config.ts:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, '../../tsconfig.json')
);

module.exports = {
  output: {
    uniqueName: "shell",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  plugins: [
    new ModuleFederationPlugin({

      // For hosts (please adjust)
      remotes: {
          // "mfe1": "mfe1@http://localhost:3000/remoteEntry.js",
      },

      shared: share({
        "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },

        // Uncomment for sharing lib of an Angular CLI or Nx workspace
        ...sharedMappings.getDescriptors()
      })

    }),
    // Uncomment for sharing lib of an Angular CLI or Nx workspace
    sharedMappings.getPlugin(),
  ],
};

Remote webpack.config.ts:

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const mf = require('@angular-architects/module-federation/webpack');
const path = require('path');
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(path.join(__dirname, 'tsconfig.json'), [
  /* mapped paths to share */
]);

module.exports = {
  output: {
    uniqueName: 'mfe1',
    publicPath: 'auto',
  },
  optimization: {
    runtimeChunk: false,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'mfe1',
      filename: 'remoteEntry.js',
      exposes: {
        './Module': './src/app/app-routing.module.ts',
      },

      shared: share({
        '@angular/core': { singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true },
        '@angular/common': { singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true },
        '@angular/common/http': { singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true },
        '@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true },

        ...sharedMappings.getDescriptors(),
      }),
    }),
    sharedMappings.getPlugin(),
  ],
};

Don't think this is necessary but i have been wrong before...

Component typescript file.

hide = true;

Component HTML:

<button (click)="hide = !hide">test</button>
<p>hide: {{hide}}</p>

<div *ngIf="hide">
  <p>This is a test</p>
</div>