NullInjectorError: R3InjectorError()[Directionality]

I am using Manfred Steyer module federation plugin and I am encountering a NullInjectorError within the console when attempting to load an external module which imports ReactiveFormsModule & FormsModule these have been shared within my webpack config on both the host and child mfe. Independently running the child mfe encountering the issue (allowing angular to bootstrap via AppModule) the application runs perfectly so this leads me to believe something is wrong with my webpack config or there is an incompatibility with this library.

Here is the error - only occurs when trying to load via shell:

Here is my shell application webpack.config.js:

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

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

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

        shared: {
          "@angular/core": { singleton: true, strictVersion: true, eager: true }, 
          "@angular/common/http": { singleton: true, strictVersion: true, eager: true }, 
          "@angular/router": { singleton: true, strictVersion: true, eager: true },
          "@angular/flex-layout": { singleton: true, strictVersion: true, eager: true, requiredVersion: "^12.0.0-beta.34" },
          "@angular/forms": { singleton: true, strictVersion: true, eager: true },
          "@angular/animations": { singleton: true, strictVersion: true, eager: true, requiredVersion: "^12.0.0" },
          "mfecommon": { singleton: true, strictVersion: true, eager: true },
          "@angular/cdk": { singleton: true, strictVersion: true, eager: true },
          "@ngrx/store": { singleton: true, strictVersion: true, eager: true },

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

Here is my AppModule:

import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule, mfecommonModule } from 'mfecommon'
import { AppRoutingModule } from './app-routing.module';

import { environment } from '../environments/environment';

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MaterialModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule,
    mfecommonModule.forRoot(environment),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is my authenticate-mfe webpack.config.js the child mfe in this case:

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

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

module.exports = {
  output: {
    uniqueName: "authenticationMFE",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },   
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  plugins: [
    new ModuleFederationPlugin({
        name: "authenticationMFE",
        filename: "remoteEntry.js",
        exposes: {
          './Module': './src/app/authentication/authentication.module.ts'
        },
        shared: {
          "@angular/core": { singleton: true, strictVersion: true, eager: true }, 
          "@angular/common/http": { singleton: true, strictVersion: true, eager: true }, 
          "@angular/router": { singleton: true, strictVersion: true, eager: true },
          "@angular/flex-layout": { singleton: true, strictVersion: true, eager: true },
          "@angular/forms": { singleton: true, strictVersion: true, eager: true },
          "mfecommon": { singleton: true, strictVersion: true, eager: true },
          "@angular/cdk": { singleton: true, strictVersion: true, eager: true },
          "@ngrx/store": { singleton: true, strictVersion: true, eager: true },
          ...sharedMappings.getDescriptors()
        }
        
    }),
    sharedMappings.getPlugin()
  ],
};

Here is the AuthenticationModule of authenticate-mfe:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { AuthenticationRoutingModule } from "./authentication-routing.module";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { FlexLayoutModule } from "@angular/flex-layout";
import { MaterialModule, mfecommonModule } from 'mfecommon';
import { environment } from "src/environments/environment";
import { TestComponent } from './components/test/test.component';

@NgModule({
    declarations: [
        TestComponent
    ],
    imports: [
        CommonModule,
        AuthenticationRoutingModule,
        ReactiveFormsModule,
        FormsModule,
        mfecommonModule.forRoot(environment),
        MaterialModule,
        FlexLayoutModule
    ],
})
export class AuthenticationModule {}

The html calling the Form Directive causing the issue:

<div class="primary-theme-color">

    <mat-card id="login-card">
        <form [formGroup]="loginForm" class="form">
            <mat-form-field>
                <input matInput placeholder="Email" formControlName="emailControl" tabindex="1" autocomplete="email" />
                <button type="button" mat-icon-button matSuffix tabindex="-1">
                    <mat-icon>email</mat-icon>
                </button>
            </mat-form-field>
        </form>
    </mat-card>
</div>

Any help with this would be greatly appreciated. I am a bit of a loss because it works fine if the form code within the HTML is removed in terms of the shell loading the mfe but the form code works fine when loading independently with no errors upon compilation or within the console.

Thanks in advance.