Nx Micro Frontend installation fails out of the box 2

Tried to setup a Micro Frontend with Angular and Nx according to the Nx guide. Second attempt after #7905.

When I execute nx run login:serve it displays the following error in console: Nevertheless it seems it works, but I can make this error to be disappeared by adding scriptType: 'text/javascript' to the webpack config:

module.exports = {
  output: {
    uniqueName: 'login',
    publicPath: 'auto',
    scriptType: 'text/javascript'
  },

Still when I run nx run dashboard:serve-mfe it started to be reloading constantly with the following error:

I noticed that dashboard’s webpack.config contains the following remote address:

plugins: [
    new ModuleFederationPlugin({
      remotes: {
        login: 'http://localhost:4201/remoteEntry.js',
      },

If I change it to the login@http://localhost:4201/remoteEntry.js, reloading stops, but I get the following error in the console:

plugins: [
    new ModuleFederationPlugin({
      remotes: {
        login: 'login@http://localhost:4201/remoteEntry.js',
      },

Error:

Environment

λ nx report

>  NX  Report complete - copy this into the issue template

  Node : 16.13.0
  OS   : win32 x64
  yarn : 1.22.15

  nx : 13.3.1
  @nrwl/angular : 13.3.1
  @nrwl/cli : 13.3.1
  @nrwl/cypress : 13.3.1
  @nrwl/devkit : 13.3.1
  @nrwl/eslint-plugin-nx : 13.3.1
  @nrwl/express : undefined
  @nrwl/jest : 13.3.1
  @nrwl/linter : 13.3.1
  @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.3.1
  @nrwl/web : undefined
  @nrwl/workspace : 13.3.1
  @nrwl/storybook : 13.3.1
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
         @angular-architects/module-federation: 13.0.1
         @angular/animations: 13.1.0
         @angular/common: 13.1.0
         @angular/compiler: 13.1.0
         @angular/core: 13.1.0
         @angular/forms: 13.1.0
         @angular/platform-browser: 13.1.0
         @angular/platform-browser-dynamic: 13.1.0
         @angular/router: 13.1.0
         @angular-devkit/build-angular: 13.0.4
         @angular/cli: 13.0.4
         @angular/compiler-cli: 13.1.0
         @angular/language-service: 13.1.0

(node:19520) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at C:\Projects\Waste\ng-mfe2\node_modules\tslib\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

[Coly010]

@DonTomato You can read more here: https://github.com/angular-architects/module-federation-plugin/blob/main/migration-guide.md

scriptType: text/javascript is a workaround for a different issue. We thought we had the other issue fixed for out-of-box experience, but I missed something, so I’ll be creating a PR soon to patch that up.

[Coly010]

When serving MFEs in dev mode locally, there’ll be an error output to the console, import.meta cannot be used outside of a module, and the script that is coming from is styles.js. It’s a known error output, but it doesn’t actually cause any breakages from as far as our testing has shown. It’s because Angular compiler attaches the styles.js file to the index.html in a script tag with defer. It needs to be attached with type=module, but Angular won’t make the change because it breaks HMR. They also provide no way of hooking into that process for us to patch it ourselves.

The good news is that the error doesn’t propagate to production, because styles are compiled to a CSS file , so there’s no erroneous JS the log an error.

It’s worth stressing that there’s been no actual errors or breakages noted from our tests.