Cannot use 'import.meta' outside a module

Question

Cannot use 'import.meta' outside a module

scottwalter-nice opened this issue 3 years ago · 52 comments

I am trying to access an Angular 13 remote with the new Angular 13 version of module-federation-plugin I get this:

Here is my webpack.config.js for my remote:

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: "angular13Mfe",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  plugins: [
    new ModuleFederationPlugin({

        // For remotes (please adjust)
        name: "angular13Mfe",
        filename: "remoteEntry.js",
        exposes: {
            './web-components': './src/bootstrap.ts',
        },

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

          ...sharedMappings.getDescriptors()
        })

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

Answer 1 · 2021-11-14T17:07:53.000Z

It looks the remoteEntry.js from Angular 12 is totally different and quit a bit smaller (34kb) than the Angular 13 version (232kb). The Angular 12 version is using require syntax, while the Anglar 13 is use import syntax it seems.

Is it a simple Webpack config setting we need to update for Angular 13?

Answer 2 · 2021-11-15T00:08:20.000Z

Ahh, it seems the culprit is publicPath: "auto". If I set to something like publicPath: "http://localhost:5005/" it will work.

Answer 3 · 2021-11-17T21:24:54.000Z

@scottfwalter did you have to change the publicPath of your host as well?

Answer 4 · 2021-11-18T13:28:01.000Z

@scottfwalter did you have to change the publicPath of your host as well?

I am attempting to use a Angular 13 child wrapped as a web component into an Angular 12 container. As of now I don't have an issue with the container. I found this issue with remoteEntry.js so perhaps its limited to the child apps.

I'm starting to think this "auto" issue is not related to module-federation-plugin. As I don't see anything in the source code which deals with publicPath. This is part of Webpack ModuleFederationPlugin.

With the error cannot use import.meta its almost like streams are being crossed. Webpack is generating the ESM module version of remoteEntry.js when we need the Common Module version.

Answer 5 · 2021-11-18T15:17:36.000Z

Hello, I have the same issue here.

It seems to be a build issue.

In Angular 12, module-federation-plugin 12, sample of working code from remoteEntry.js (built in dev mode)

 	/* webpack/runtime/publicPath */
 	(() => {
 		var scriptUrl;
 		if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
 		var document = __webpack_require__.g.document;
 		if (!scriptUrl && document) {
 			if (document.currentScript)
 				scriptUrl = document.currentScript.src
 			if (!scriptUrl) {
 				var scripts = document.getElementsByTagName("script");
 				if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
 			}
 		}
 		// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
 		// or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
 		if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
 		scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
 		__webpack_require__.p = scriptUrl;
 	})();

In Angular 13, module-federation-plugin 13

/* webpack/runtime/publicPath */
	(() => {
		var scriptUrl;
		if (typeof import.meta.url === "string") scriptUrl = import.meta.url
	// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
	// or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
		if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
		scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
		__webpack_require__.p = scriptUrl;
	})();

Answer 6 · 2021-11-19T04:19:39.000Z

After setting the public path the browser for host keeps refreshing with a warning saying remoteEntry.js couldnot be loaded but in network tab it shows 200 status.

Answer 7 · 2021-11-20T09:48:55.000Z

I have the same problem, if I change the publicPath field it goes loop

Answer 8 · 2021-11-22T12:56:22.000Z

I have the same problem, if I change the publicPath field it goes loop

Answer 9 · 2021-11-22T14:43:16.000Z

I have the same problem, if I change the publicPath field it goes loop

What do you mean by "goes loop". Do you mean the error goes away?

Answer 10 · 2021-11-22T15:08:40.000Z

if I specify the publicPath, when I load the module route it reloads the host

Answer 11 · 2021-11-23T14:35:53.000Z

Same here after upgrading to Angular 13 (using Nx tool), I have to remove the route declaration from the routing module or it keeps reloading in an infinite loop, while the console says: Initialization of sharing external failed: ScriptExternalLoadError: Loading script failed.
(error: http://localhost:4201/remoteEntry.js)
I've tried several configurations, but none of them worked, while the actual one worked with angular 12.
I've found a way to work declaring the route, and it is to specify relative route to the module using the dynamic import instead of using the remote app name and the exposed module in the config, such as:
{ path: 'verification', loadChildren: () => import('./../../../verification/src/app/remote-entry/entry.module').then((m) => m.RemoteEntryModule), },
instead of
{ path: 'verification', loadChildren: () => import('verification/Module').then((m) => m.RemoteEntryModule), },

Answer 12 · 2021-11-24T07:40:58.000Z

I have the same problem, the shell module do reloading again and again with message "Initialization of sharing external failed: ScriptExternalLoadError: Loading script failed.". Currently I use NX and @angular-architects/module-federation": "13.0.1" , angular 13.0.2

REMOTE MODULE webpack.config.js

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

/**
 * We use the NX_TSCONFIG_PATH environment variable when using the @nrwl/angular:webpack-browser
 * builder as it will generate a temporary tsconfig file which contains any required remappings of
 * shared libraries.
 * A remapping will occur when a library is buildable, as webpack needs to know the location of the
 * built files for the buildable library.
 * This NX_TSCONFIG_PATH environment variable is set by the @nrwl/angular:webpack-browser and it contains
 * the location of the generated temporary tsconfig file.
 */
const tsConfigPath =
  process.env.NX_TSCONFIG_PATH ??
  path.join(__dirname, '../../tsconfig.base.json');

const workspaceRootPath = path.join(__dirname, '../../');
const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  tsConfigPath,
  [
    /* mapped paths to share */
    '@mfe01/shared/data-access-user'    
  ],
  workspaceRootPath
);

module.exports = {
  output: {
    uniqueName: 'login',
    publicPath: 'auto',
  },
  optimization: {
    runtimeChunk: false,
    minimize: false,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'login',
      filename: 'remoteEntry.js',
      exposes: {
        './Module': 'apps/login/src/app/remote-entry/entry.module.ts',
      },
      shared: {
        '@angular/core': { singleton: true, strictVersion: true },
        '@angular/common': { singleton: true, strictVersion: true },
        '@angular/common/http': { singleton: true, strictVersion: true },
        '@angular/router': { singleton: true, strictVersion: true },
        ...sharedMappings.getDescriptors(),
      },
    }),
    sharedMappings.getPlugin(),
  ],
};

SHELL MODULE webpack.config.js

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

/**
 * We use the NX_TSCONFIG_PATH environment variable when using the @nrwl/angular:webpack-browser
 * builder as it will generate a temporary tsconfig file which contains any required remappings of
 * shared libraries.
 * A remapping will occur when a library is buildable, as webpack needs to know the location of the
 * built files for the buildable library.
 * This NX_TSCONFIG_PATH environment variable is set by the @nrwl/angular:webpack-browser and it contains
 * the location of the generated temporary tsconfig file.
 */
const tsConfigPath =
  process.env.NX_TSCONFIG_PATH ??
  path.join(__dirname, '../../tsconfig.base.json');

const workspaceRootPath = path.join(__dirname, '../../');
const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  tsConfigPath,
  [
    /* mapped paths to share */
    '@mfe01/shared/data-access-user'    
  ],
  workspaceRootPath
);

module.exports = {
  output: {
    uniqueName: 'dashboard',
    publicPath: 'auto',
  },
  optimization: {
    runtimeChunk: false,
    minimize: false,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        login: 'login@http://localhost:4201/remoteEntry.js',
      },
      shared: {
        '@angular/core': { singleton: true, strictVersion: true },
        '@angular/common': { singleton: true, strictVersion: true },
        '@angular/common/http': { singleton: true, strictVersion: true },
        '@angular/router': { singleton: true, strictVersion: true },
        ...sharedMappings.getDescriptors(),
      },
    }),
    sharedMappings.getPlugin(),
  ],
};

waiting to see some solution.

Answer 13 · 2021-11-24T13:20:43.000Z

Try this for a temporary workaround till issue is resolved:

Add scriptType: 'text/javascript' to output to fix import.meta error.

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

Ref: https://webpack.js.org/configuration/output/#outputscripttype

Start the server with --liveReload=false to prevent auto reload loop.

This seems to work for now.

Answer 14 · 2021-11-24T14:58:37.000Z

Try this for a temporary workaround till issue is resolved:

Add scriptType: 'text/javascript' to output to fix import.meta error.
module.exports = {
  output: {
    uniqueName: "dashboard",
    publicPath: "auto",
    scriptType: 'text/javascript'
  }, 
...
Ref: https://webpack.js.org/configuration/output/#outputscripttype

Start the server with --liveReload=false to prevent auto reload loop.

This seems to work for now.

work like a charm 👌

Answer 15 · 2021-11-24T15:07:12.000Z

Try this for a temporary workaround till issue is resolved:

Add scriptType: 'text/javascript' to output to fix import.meta error.
module.exports = {
  output: {
    uniqueName: "dashboard",
    publicPath: "auto",
    scriptType: 'text/javascript'
  }, 
...
Ref: https://webpack.js.org/configuration/output/#outputscripttype

Start the server with --liveReload=false to prevent auto reload loop.

This seems to work for now.

Thanks SandeepThomas 's solution, It's wotking now.

Answer 16 · 2021-11-29T18:22:10.000Z

Hi,

just had a longer remote session with webpack's one and only Tobias Koppers. We found a solution! Now, we "only" need to implement it here in terms of schematics and lib adjustments. This will result in some minor braking changes, as loading modules -- what Angular beginning with v13 does -- works differently than loading scripts.

Quick Solution

Set scriptType: 'text/javascript' as shown above (big thanks to @sandeep !!!)

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

Setting this is okay and doesn't provide a drawback over using Angular 13's new settings.

To get back auto-reload, set publicHost for your remotes in angular.json:

"options": {
   "publicHost": "http://localhost:3000",
   "port": 3000,
   "extraWebpackConfig": "projects/mfe1/webpack.config.js"
}

As this is kind of redundant, I will discuss this with the Angular CLI team.
(Background: If this is not set, Angular CLI sets port=0 for the web socket connection which causes the webpack-dev-server to use the current port. However, in the case of a loaded remote, this is always the host's port and not the remote's one. Hence, a file with the wrong hash is loaded causing the remoteEntry.js to do a reload)

Future Solution

This package will get new schematics and an updated set of helper functions. They won't need a remoteName anymore, as we will directly load modules. This config option needs to be removed from your codebase too (minor update), once this version lands (will be another major version).

One more time, big thanks to Tobias Koppers for this awesome remote session and for everything he does for the Angular community. This. Is. Awesome!!!

Answer 17 · 2021-11-30T00:33:11.000Z

@manfredsteyer - I don't have an angular.json file in my workspace following the module federation workshop from nx - would this be the project.json in that case?

Answer 18 · 2021-11-30T09:52:40.000Z

@hamishcrittenden Yes, but you'll need to add it as an option to your serve target

Answer 19 · 2021-12-01T22:57:47.000Z

Meanwhile, we have a first beta version of this plugin that works with Angular 13. Please find some further details and an example here:

https://github.com/angular-architects/module-federation-plugin/blob/main/migration-guide.md

Currently, I'm working with @Coly010 to further improve all of this and to make this also work together with Nx seamlessly.

We keep you posted.

Answer 20 · 2021-12-02T02:54:37.000Z

remoteName is not optional parameter. it is mandatory as of now with the types.
export declare type LoadRemoteModuleScriptOptions = {
type?: 'script';
remoteEntry?: string;
remoteName: string;
exposedModule: string;
};
export declare type LoadRemoteModuleEsmOptions = {
type: 'module';
remoteEntry: string;
exposedModule: string;
};

so even if we use type module it is asking us to keep it as of now.

Answer 21 · 2021-12-02T11:15:15.000Z

Are you sure? In my example [1], if I use type: 'module', I don't need to define a remoteName but a remoteEntry and a exposedModule.

[1] https://github.com/manfredsteyer/mf-angular-13

Answer 22 · 2021-12-07T12:21:47.000Z

I noticed that using scriptType 'text/javascript' in my shell (no plugins loaded) breaks my application with random errors when keeping optimization.minimize in true ... the errors go away when minification is disabled; see webpack/webpack#14901 for an example.

The issue seems to be very related to the list of modules that I share in the ModuleFederationPlugin: when I remove some elements from that list, the error disappears (but I cannot do that because I need to share some of those with my remotes).

I tried, but so far I couldn't recreate the issue in an isolated repository.

On the other hand, while trying the migration described in https://github.com/angular-architects/module-federation-plugin/blob/main/migration-guide.md, I found that I get the following error in production mode:

publicPath:5 Uncaught Error: Automatic publicPath is not supported in this browser

So I'm pretty stuck at the moment and cannot upgrade in either of the proposed ways.

Any idea about how to troubleshoot the random errors would be really appreciated.

Answer 23 · 2021-12-07T18:46:18.000Z

Hi @gschuager,

thanks for pointing this out.

To bypass this issue, you can directly set the SPA's URL instead of the value "auto" in the webpack configs:

module.exports = {
  output: {
    uniqueName: "shell",
-    publicPath: "auto"
+    publicPath: "http://localhost:5000/"
  },
  [....]
}

Don't forget the trailing slash.

Oh, and as we are now loading the scripts via an import statement, you need to enable CORS.

Answer 24 · 2021-12-07T18:47:30.000Z

I hope, I can come up with a better solution soon. We really need "auto" to work.

Btw: Can you identify what one needs to do in order to break the app for scriptType 'text/javascript'? Is it about using a specific lib?

Answer 25 · 2021-12-07T19:10:27.000Z

Thanks @manfredsteyer.

Unfortunately, since the app needs to be deployed in multiple locations, hardcoding the publicPath is not an option in my case.

I will continue trying to identify the problem with the scriptType text/javascript alternative; will let you know in case I find anything useful.

Answer 26 · 2021-12-07T22:08:00.000Z

I was finally able to reproduce the issue in isolation by adding ngrx.

The code is at https://github.com/gschuager/mf-angular-13/tree/production-build-issue (branch production-build-issue)

To trigger the error just run ng serve shell --configuration=production. It does not always show up, so you may need to refresh a couple of times.

The error I see is the following:

Answer 27 · 2021-12-10T12:33:59.000Z

Hi @gschuager,

Can you please retry it with CLI 13.1. For me, this resolved this very issue.

Thanks for the repo. Will look into it with pleasure.

Answer 28 · 2021-12-10T12:37:06.000Z

General Info

This Monday, we will release the next version that should solve the issues outlined here.

Meanwhile, you can use the beta version 14.0.0-beta.1 with the migration guide at [1]

[1] https://github.com/angular-architects/module-federation-plugin/blob/main/migration-guide.md

Answer 29 · 2021-12-11T14:39:42.000Z

@manfredsteyer Thank you. The update seems to have solved the random loading issue with scriptType text/javascript, but I'm now getting new errors (related to moment, ES module loading, webpack, etc) that weren't there before the whole update (angular, mfe, nx, etc) ... so I'm still troubleshooting and trying to find out if it is an issue with my code or with some other component.

Answer 30 · 2021-12-12T19:23:11.000Z

which errors do you get?

Answer 31 · 2021-12-12T19:31:01.000Z

I have a solution for the Automatic publicPath is not supported in this browser we get in prod mod when using publicPath: "auto". If we use ECMAScript modules (default since Angular 13), we need to set the compilation target in the tsconfig.json to es2020.

8<------

Reason:

webpack uses import.meta.url for resolving the publicPath in ecmascript modules
this is an es2020 feature
since version 12.x, the CLI uses esbuild for tree shaking
esbuild transforms import.meta to an empty object if the compilation target is lower than es2020
if we set the target to es2020 it doesn't transform it --> everything works.

More details:
See this table here:
https://esbuild.github.io/content-types/#javascript

Answer 32 · 2021-12-13T12:50:47.000Z

Thanks for the update.
I've been doing some testing.

With scriptType text/javascript I'm getting this error:

g should be moment in that code, but it is a Module instead; the weird thing is that it doesn´t even show up with ng server --configuration=production... you have to build it with ng build --configuration=production and serve it with something else for it to appear. I'm not too worried about this one because I was intending to replace moment with something else anyway.

With ES modules + es2020 target everything seems to be working ok, but I get the following error in the browser's console when running with nx serve (both in development and production configurations):

Uncaught SyntaxError: Cannot use 'import.meta' outside a module          styles.js:1

The error goes away if I build everything and serve the resulting files.

Answer 33 · 2021-12-13T20:59:27.000Z

Perfect. Please ignore this error in the styles.js for the time being. It only occurs in dev mode. We already know the reason and at we are in conversations with the CLI for this.

Answer 34 · 2021-12-13T20:59:50.000Z

Update: We have a new release candidate for Angular 13.1 support:
https://www.npmjs.com/package/@angular-architects/module-federation/v/14.0.0-rc.1

Answer 35 · 2021-12-14T23:49:33.000Z

@manfredsteyer Will the 14.x work with Angular 12 or is it only for Angular 13? Or should we stick with version 12.x for Angular 12?

Answer 36 · 2021-12-15T09:49:56.000Z

Hi Scott,

Version 14.x will work with Angular 13.
For Angular 12, please stick with Version 12.

As soon as possible we will align major versions with Angular again, so that major(Angular) === major(this lib)

Answer 37 · 2021-12-15T15:40:22.000Z

@manfredsteyer
How do we install 14.0.0-rc.1?
yarn add @angular-architects/module-federation@14.0.0-rc.1
gives me this error:
error An unexpected error occurred: "expected hoisted manifest for \"ngx-build-plus#@angular-devkit/build-angular#webpack-dev-server#schema-utils#ajv-keywords\"".

extract of my package.json:

Also in the migration guide, what is the correct to use web component with Angular 13?

Answer 38 · 2021-12-15T19:02:52.000Z

@manfredsteyer something is still wrong. I am trying to install 14.0.0-rc.1 but i got error:
No matching version found for @angular-architects/module-federation-runtime@14.0.0-rc.1.

runtime is not published or peer deps are invalid

Answer 39 · 2021-12-16T01:27:27.000Z

Thanks for the hint. It's published now.

Answer 40 · 2021-12-17T12:02:16.000Z

Hi I still can't get it to work.
I already followed your migration guide and I am using version 14. But I still get constant reloads and TypeError: container.init is not a function . Am I missing here something?

Answer 41 · 2021-12-17T20:06:04.000Z

Did you also adjust how you load your remoteEntry.js in the main.ts? loadRemoteEntry should now also contain a type:'module'.

Answer 42 · 2021-12-17T20:28:38.000Z

14.0.0 is life now. Successfully tested with Angular and CLI 13.1.x

If you need help with updating, feel free to reach out here.

Answer 43 · 2021-12-18T00:17:15.000Z

Thanks @manfredsteyer
14.0.0 works perfect with Angular CLI 13.1.X.

Answer 44 · 2021-12-20T10:45:51.000Z

14.0.0 is life now. Successfully tested with Angular and CLI 13.1.x

If you need help with updating, feel free to reach out here.

I updated with 14.0.1 and I have no error but a white page when I serve my app

Answer 45 · 2021-12-20T15:00:42.000Z

Thanks @manfredsteyer

I updated with 14.0.1 and successfully used the Module Federation tool WebComponentWrapper:

 type: 'module',
 exposedModule: './web-components',
 elementName: 'angular13-element'

Everything seems to work fine however I can still see this error in the log:
styles.js:4536 Uncaught SyntaxError: Cannot use 'import.meta' outside a module

How do we get rid of it?

Answer 46 · 2021-12-20T15:14:17.000Z

Thanks @manfredsteyer

I updated with 14.0.1 and successfully used the Module Federation tool WebComponentWrapper:
 type: 'module',
 exposedModule: './web-components',
 elementName: 'angular13-element'
Everything seems to work fine however I can still see this error in the log: styles.js:4536 Uncaught SyntaxError: Cannot use 'import.meta' outside a module

How do we get rid of it?

@cnestor1 add this: scriptType: 'text/javascript' in ur webpack config

Answer 47 · 2021-12-21T16:11:52.000Z

@cnestor1 add this: scriptType: 'text/javascript' in ur webpack config

@gobedson Thx! I thought that was included in the v14.0.1 release and this was no longer needed...

Also for those using web components with Angular 13 shell:
<mft-wc-wrapper [options]="item.option" [props]="item.props"></mft-wc-wrapper>

For react web component, etc.. use this config in the shell:

      type: 'script',
      remoteEntry: 'http://domain:8080/reactApp' ,
      remoteName: 'react',
      exposedModule: './web-components',
      elementName: 'react-element'
    };

For Angular13 web component use:

      type: 'module',
      remoteEntry: 'http://domain:8080/angular13App' ,
      exposedModule: './web-components',
      elementName: 'angular-element'
    };

Answer 48 · 2021-12-21T18:10:36.000Z

Thanks @manfredsteyer
I updated with 14.0.1 and successfully used the Module Federation tool WebComponentWrapper:
 type: 'module',
 exposedModule: './web-components',
 elementName: 'angular13-element'
Everything seems to work fine however I can still see this error in the log: styles.js:4536 Uncaught SyntaxError: Cannot use 'import.meta' outside a module
How do we get rid of it?
@cnestor1 add this: scriptType: 'text/javascript' in ur webpack config

same error here, per docs https://github.com/angular-architects/module-federation-plugin/blob/main/migration-guide.md scriptType: 'text/javascript' it's optional.

Getting the same error here Uncaught SyntaxError: Cannot use 'import.meta' outside a module in styles.js:4535

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "core-lib": [
        "projects/core-lib/src/public-api.ts"
      ]
    },
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

project shell webpack.config.js

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'),
  ['core-lib']);

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

      // For remotes (please adjust)
      // name: "shell",
      // filename: "remoteEntry.js",
      // exposes: {
      //     './Component': './projects/shell/src/app/app.component.ts',
      // },

      // For hosts (please adjust)
      remotes: {},

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

        ...sharedMappings.getDescriptors()
      })

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

project ddiez webpack.config.js

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'),
  ['core-lib']);

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

      library: {type: "module"},

      //For remotes (please adjust)
      name: "ddiez",
      filename: "remoteEntry.js",
      exposes: {
        './Main': './projects/ddiez/src/main/main.module.ts',
      },

      // For hosts (please adjust)
      // remotes: {
      //     "shell": "shell@http://localhost:5000/remoteEntry.js",

      // },

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

        ...sharedMappings.getDescriptors()
      })

    }),
    sharedMappings.getPlugin()
  ]
};

Is there something wrong with my config?

Answer 49 · 2021-12-23T12:57:17.000Z

Hi,

good point. For the time beeing, we need to live with this error when it comes to the styles.js.
styles.js:4536 Uncaught SyntaxError: Cannot use 'import.meta' outside a module

Good message: This error only occurs in dev mode and does not destroy anything.

If we get the error for other files, we need to fix it.

The reason ist, that the CLI does not import this file with <script type="module" ...> The CLI team is aware that the CLI should use type="module" but another issue with HMR is preventing them of doing this.

Once, this has been solved, the error will go away.

Answer 50 · 2021-12-24T09:27:47.000Z

Hello,
after migrating to angular 13 and module-federation@14.0.1
my ng build --localize not working.

i have this error :
✖ Localized bundle generation failed: main.8d44da096d79f5c9.js: import.meta may appear only with 'sourceType: "module"' (1:4746)
An error occurred inlining file "main.8d44da096d79f5c9.js"

Can someone help me please ?

Answer 51 · 2022-01-28T12:21:18.000Z

Did you also adjust how you load your remoteEntry.js in the main.ts? loadRemoteEntry should now also contain a type:'module'.

I run into same issue.
Looking at the code and the path still takes to where it tries to "container.init()"

Running NX monorepo
"@angular-architects/module-federation": "^14.0.1",
"@angular/core": "13.1.2",
"@nrwl/workspace": "13.4.5",

loadRemoteEntry({ type: 'module', remoteEntry: ... });

function loadRemoteModuleEntry(remoteEntry) {
    return __awaiter(this, void 0, void 0, function* () {
        if (containerMap[remoteEntry]) {
            return Promise.resolve();
        }
        return yield import(/* webpackIgnore:true */ remoteEntry).then(container => {
-->       initRemote(container, remoteEntry);
            containerMap[remoteEntry] = container;
        });
    });
}

function initRemote(container, key) {
    return __awaiter(this, void 0, void 0, function* () {
        // const container = window[key] as Container;
        // Do we still need to initialize the remote?
        if (remoteMap[key]) {
            return container;
        }
        // Do we still need to initialize the share scope?
        if (!isDefaultScopeInitialized) {
            yield __webpack_init_sharing__('default');
            isDefaultScopeInitialized = true;
        }
-->   yield container.init(__webpack_share_scopes__.default);
        remoteMap[key] = true;
        return container;
    });
}

Answer 52 · 2022-01-31T19:18:11.000Z

@tuuling, this issue is already closed, because the ng v13 integration is stable.
In case you found an issue related to this package, please feel free to open a new issue (or find a similar open one) with concrete steps to reproduce and details about your setup and the used versions.