Angular 13 and MFE breaks with Cypress

Current Behavior

The styles defined in angular.json cannot be injected default value = inject:true. Causes the test to fail completely.

Expected Behavior

Steps to Reproduce

1. Create a fresh nx workspace
2. add an angular app with mfe preconfigured
3. run e2e tests.

The nx custom webpack config breaks the tests. Remove the custom webpack config and the e2e tests work again.

Failure Logs

       "before each" hook for "should display welcome message":
     SyntaxError: The following error originated from your application code, not from Cypress.

  > Cannot use 'import.meta' outside a module

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.

https://on.cypress.io/uncaught-exception-from-application

Environment

>  NX  Report complete - copy this into the issue template

  Node : 14.16.0
  OS   : darwin x64
  npm  : 6.14.11
  
  nx : 13.2.4
  @nrwl/angular : 13.2.4
  @nrwl/cli : 13.2.4
  @nrwl/cypress : 13.2.4
  @nrwl/devkit : 13.2.4
  @nrwl/eslint-plugin-nx : 13.2.4
  @nrwl/express : undefined
  @nrwl/jest : 13.2.4
  @nrwl/linter : 13.2.4
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.2.4
  @nrwl/web : undefined
  @nrwl/workspace : 13.2.4
  @nrwl/storybook : 13.2.4
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
         @angular-architects/module-federation: 12.5.3
         @angular/animations: 13.0.3
         @angular/common: 13.0.3
         @angular/compiler: 13.0.3
         @angular/core: 13.0.3
         @angular/forms: 13.0.3
         @angular/platform-browser: 13.0.3
         @angular/platform-browser-dynamic: 13.0.3
         @angular/router: 13.0.3
         @angular-devkit/build-angular: 13.0.4
         @angular/cli: 13.0.4
         @angular/compiler-cli: 13.0.3
         @angular/language-service: 13.0.3

[Coly010]

I should update this to mention that we are working on addressing this to provide an improved out-of-box experience with MFEs.

[Coly010]

This is related to an issue with Webpack compiling to use module syntax with Angular 13.

A fix for Webpack and MFEs was released in Nx 13.3 yesterday.

Could you try it again using 13.3? If you have a workspace already, make sure to run the migrations as it should patch your webpack config.