Error: Invalid 'externals' config, consider using a barrel import instead.

[h4570-work]

Hi.

Month ago, when tried to migrate to v4 I found this error native-federation/native-federation-core#25, but with small, manual package patch my project compiled and worked with following packages:

	"dependencies": {
		"@softarc/native-federation-runtime": "4.0.0-RC8",
	},
	"devDependencies": {
		"@angular-architects/native-federation-v4": "^21.1.7",
		"@softarc/native-federation": "4.0.0-RC8",
		"@softarc/native-federation-orchestrator": "4.0.0-RC4",
	}

1-2 weeks ago I tried to update v4 to newest version to remove my manual package patch:

	"dependencies": {
		"@softarc/native-federation-runtime": "4.0.0-RC9",
	},
	"devDependencies": {
		"@angular-architects/native-federation-v4": "21.1.9",
		"@softarc/native-federation": "4.0.0-RC9",
		"@softarc/native-federation-orchestrator": "^4.0.0",
	}

But I found that my project cant compile with following error:

An unhandled exception occurred: Invalid 'externals' config. Invalid imports paths detected, consider using a barrel import instead. 
See "C:\Users\<redacted>\AppData\Local\Temp\ng-dXvvDB\angular-errors.log" for further details.

[error] Error: Invalid 'externals' config. Invalid imports paths detected, consider using a barrel import instead. 
    at checkForInvalidImports (file:///C:/repos/<redacted>/node_modules/@angular-architects/native-federation-v4/src/utils/check-for-invalid-imports.js:27:15)
    at runBuilder (file:///C:/repos/<redacted>/node_modules/@angular-architects/native-federation-v4/src/builders/build/builder.js:145:5)
    at process.processTicksAndRejections (node:internal/process/task_queues:103:5)
    at async handleAsyncIterator (C:\repos\<redacted>\node_modules\@angular-devkit\architect\src\api.js:38:28)

Updating to newest package version didnt worked:

	"dependencies": {
          // removed
	},
	"devDependencies": {
		"@angular-architects/native-federation-v4": "21.1.13",
		"@softarc/native-federation": "^4.0.1",
		"@softarc/native-federation-orchestrator": "^4.0.2",
	}

Is this issue related to native-federation/native-federation-core#34?

[Aukevanoost]

Hi @h4570-work

Interesting! Yes it is! Here's where the error is thrown:

angular-adapter/packages/angular/src/utils/check-for-invalid-imports.ts

Line 35 in 7791d23

`Invalid '${type}' config. Invalid imports paths detected, consider using a barrel import instead. `

Now, you're supposed to also see a warning before this error is thrown, which notifies you of the illegal import:

angular-adapter/packages/angular/src/utils/check-for-invalid-imports.ts

Line 31 in 7791d23

logger.warn(`Import '${e}' contains a bad dot (.) import.`);

[h4570-work]

I see three zone.js warnings:

 WARN  Import 'zone.js/testing' contains a bad dot (.) import.
 WARN  Import 'zone.js/node' contains a bad dot (.) import.
 WARN  Import 'zone.js/mix' contains a bad dot (.) import.
An unhandled exception occurred: Invalid 'externals' config. Invalid imports paths detected, consider using a barrel import instead. 
See "C:\Users\<redacted>\AppData\Local\Temp\ng-MGXgTc\angular-errors.log" for further details.

I have references to zone.js in angular.json, package.json and in federation.config.js:skip:[].
So for quick test I removed them from angular.json and federation.config.js (so I have only zone.js referenced in package.json), but I still can't compile the app:

---

[Aukevanoost]

Right, 2 ways to fix this:

1. Move your zone.js dependency to devDependencies in the package.json
2. Add (pkg) => pkg.startsWith("zone.js"), to your skips array in the federaction.config.(m)js

[h4570-work]

After moving zone.js to devDependencies it moved further, but still have errors.
Now I see:

PS C:\repos\<redacted>> ng serve shell
Node.js version v25.2.1 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/previous-releases/.
 INFO  [Federation SSE] Local reloader initialized with endpoint /@angular-architects/native-federation:build-notifications
 INFO  Building federation artifacts
 NOTE  Skip packages you don't want to share in your federation config
 INFO  Bundling external npm packages with bundle type 'browser-shared'
X [ERROR] Could not resolve "@angular/upgrade/static"

    node_modules/@angular/router/fesm2022/upgrade.mjs:9:30:
      9 │ import { UpgradeModule } from '@angular/upgrade/static';
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@angular/upgrade/static" as external to exclude it from the bundle, which
  will remove this error and leave the unresolved path in the bundle.

1 of 5 errors shown (disable the message limit with --log-limit=0)
 ERRR  Error bundling shared npm package 
 ERRR  Build failed with 5 errors:
node_modules/@angular-devkit/core/src/utils/template.js:234:11: ERROR: Unterminated string literal
node_modules/@angular/cdk/fesm2022/testing-selenium-webdriver.mjs:1:27: ERROR: Could not resolve "selenium-webdriver"
node_modules/@angular/common/fesm2022/upgrade.mjs:10:30: ERROR: Could not resolve "@angular/upgrade/static"
node_modules/@angular/router/fesm2022/upgrade.mjs:9:30: ERROR: Could not resolve "@angular/upgrade/static"
node_modules/@schematics/angular/third_party/github.com/Microsoft/TypeScript/lib/typescript.js:8443:32: ERROR: Could not resolve "inspector"
 ERRR  For more information, run in verbose mode
 NOTE  
 NOTE  
 NOTE  ** Important Information: ***
 NOTE  The error message above shows an issue with bundling a node_module.
 NOTE  In most cases this is because you (indirectly) shared a Node.js package,
 NOTE  while Native Federation builds for the browser.
 NOTE  You can move such packages into devDependencies or skip them in your federation.config.js.
 NOTE  
 NOTE  More Details: https://bit.ly/nf-issue
 NOTE  
 NOTE  
 ERRR  Build failed with 5 errors:
node_modules/@angular-devkit/core/src/utils/template.js:234:11: ERROR: Unterminated string literal
node_modules/@angular/cdk/fesm2022/testing-selenium-webdriver.mjs:1:27: ERROR: Could not resolve "selenium-webdriver"
node_modules/@angular/common/fesm2022/upgrade.mjs:10:30: ERROR: Could not resolve "@angular/upgrade/static"
node_modules/@angular/router/fesm2022/upgrade.mjs:9:30: ERROR: Could not resolve "@angular/upgrade/static"
node_modules/@schematics/angular/third_party/github.com/Microsoft/TypeScript/lib/typescript.js:8443:32: ERROR: Could not resolve "inspector"

My package.json:

	"dependencies": {
		"@angular/animations": "^21.2.6",
		"@angular/cdk": "^21.2.4",
		"@angular/common": "^21.2.6",
		"@angular/compiler": "^21.2.6",
		"@angular/core": "^21.2.6",
		"@angular/forms": "^21.2.6",
		"@angular/platform-browser": "^21.2.6",
		"@angular/platform-browser-dynamic": "^21.2.6",
		"@angular/pwa": "^21.2.5",
		"@angular/router": "^21.2.6",
		"@angular/service-worker": "^21.2.6",
		"es-module-shims": "^2.8.0",
		"rxjs": "~7.8.2",
		"tslib": "~2.3.0"
	},
	"devDependencies": {
		"@angular-architects/native-federation-v4": "21.1.13",
		"@angular-devkit/build-angular": "^21.2.5",
		"@angular/build": "^21.2.5",
		"@angular/cli": "^21.2.5",
		"@angular/compiler-cli": "^21.2.6",
		"@angular/language-service": "^21.2.6",
		"@elastic/apm-rum-angular": "^3.0.11",
		"@ng-select/ng-select": "^21.7.0",
		"<redacted>": "^5.52.2",
		"<redacted>": "^5.52.2",
		"<redacted>": "^5.52.2",
		"<redacted>": "^0.20.0",
		"<redacted>": "^0.20.0",
		"@softarc/native-federation": "^4.0.1",
		"@softarc/native-federation-orchestrator": "^4.0.2",
		"@types/big.js": "6.2.2",
		"@types/lodash-es": "^4.17.12",
		"@types/node": "22.13.16",
		"@types/object-hash": "3.0.6",
		"angular-eslint": "^21.3.1",
		"angular-gridster2": "^21.0.1",
		"angular-imask": "^6.4.2",
		"big.js": "^7.0.1",
		"concurrently": "^9.2.1",
		"eslint": "^9.39.1",
		"file-saver-es": "^2.0.5",
		"jsdom": "^27.3.0",
		"lodash-es": "^4.17.21",
		"moment": "^2.30.1",
		"nanoid": "^5.1.5",
		"ng-packagr": "^21.2.0",
		"ngx-extended-pdf-viewer": "^25.6.4",
		"ngx-highlightjs": "^14.0.0",
		"ngx-matomo-client": "^9.0.1",
		"ngx-pagination": "^6.0.3",
		"object-hash": "^3.0.0",
		"shared": "file:dist/shared",
		"ts-node": "10.9.2",
		"typescript": "~5.9.2",
		"typescript-eslint": "8.47.0",
		"vitest": "^4.0.17",
		"zone.js": "~0.15.0"
	}

and federation.config.js:

import { withNativeFederation, shareAll } from '@softarc/native-federation/config';

export default withNativeFederation({
  name: 'shell',

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

  skip: [
	/^<redacted>/,
	/^<redacted>/,
	/^rxjs/,
	'nanoid',
	'@angular/pwa',
	'object-hash',
	'es-module-shims',

	// --- tried these, but also not work ---
	/^zone\.js/,
	'selenium-webdriver',
	'@angular/upgrade/static',
	'inspector'
  ],

  features: { 
	mappingVersion: true,
    ignoreUnusedDeps: false
  },
});

[Aukevanoost]

Sorry for the late response.

Do you happen to have ignoreUnusedDeps: false on purpose?

If so, all "dependencies" in your package.json are compiled to externals, you might want to move these to "devDependencies":

	"dependencies": {
		"@angular/animations": "^21.2.6",               // <-- move to devDependencies
		"@angular/cdk": "^21.2.4",                      // <-- move to devDependencies
		"@angular/common": "^21.2.6",
		"@angular/compiler": "^21.2.6",                 // <-- move to devDependencies
		"@angular/core": "^21.2.6",
		"@angular/forms": "^21.2.6",
		"@angular/platform-browser": "^21.2.6",         // <-- this one maybe? if you still have errors
		"@angular/platform-browser-dynamic": "^21.2.6", // <-- this one maybe? if you still have errors
		"@angular/pwa": "^21.2.5",                      // <--
		"@angular/router": "^21.2.6",
		"@angular/service-worker": "^21.2.6",           // <-- this one maybe? if you still have errors
		"es-module-shims": "^2.8.0",                    // <-- move to devDependencies
		"rxjs": "~7.8.2",
		"tslib": "~2.3.0"
	},

The ignoreUnusedDeps feature prevents this by only packaging what you actually use. But if the feature is causing problems, you can also hand-pick the deps you want to share by adding the "build-time" deps to the skiplist or devDependencies array.

[h4570-work]

Hi, I did some tests with ng serve shell command.

So after moving these dependencies to devDependencies:

		"@angular/cdk": "^21.2.4",
		"@angular/common": "^21.2.6",
		"@angular/router": "^21.2.6",

Compiler stopped showing errors (ng serve shell).
Unfortunatelly after opening the DevTools console, following error appeared:

ERROR TypeError: Cannot read properties of null (reading 'getBaseHref')
    at _BrowserPlatformLocation.getBaseHrefFromDOM (_platform_location-chunk.mjs:50:19)
    at new _PathLocationStrategy (_location-chunk.mjs:56:53)
    at Object.PathLocationStrategy_Factory [as factory] (_location-chunk.mjs:98:12)
    at r3_injector.ts:618:41
    at runInInjectorProfilerContext (fields.ts:12:14)
    at R3Injector.hydrate (r3_injector.ts:616:9)
    at R3Injector.get (r3_injector.ts:445:7)
    at R3Injector.retrieve (r3_injector.ts:311:78)
    at injectInjectorOnly (injector_compatibility.ts:304:12)
    at ɵɵinject (injector_compatibility.ts:327:65)

I suppose that the root cause of this error is leaving @angular/core in dependencies.
For another test I moved all @angular/* libs to devDependencies

	"dependencies": {
		"rxjs": "~7.8.2",
		"tslib": "~2.3.0"
	},
	"devDependencies": {
		"@angular/animations": "21.2.6",
		"@angular/compiler": "21.2.6",
		"@angular/core": "21.2.6",
                (...)

and console error changed to:

chunk-MTTUFZS3.js:83 ERROR RuntimeError: NG0203: The `_Router` token injection failed. `inject()` function must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://v21.angular.dev/errors/NG0203
    at injectInjectorOnly (_effect-chunk2.mjs:667:11)
    at ɵɵinject (_effect-chunk2.mjs:684:40)
    at inject2 (_effect-chunk2.mjs:693:10)
    at new _AuthService (auth.service.ts:43:28)
    at Object.AuthService_Factory [as factory] (auth.service.ts:353:2)

It cannot start DI in one of my services (it is not related to Router, it can't inject anything - weird).
This AuthService have @Injectable({ providedIn: 'root' }).

---

We used ignoreUnusedDeps: false because of some DI problems (see below).

Currently when I set ignoreUnusedDeps: true, there are no compiler errors, no runtime errors (on shell), but when shell is trying to load microfrontend via:

Shell:

// federation.manifest.json
{
	"xxx": "http://localhost:4201/remoteEntry.json"
}

// app.routes.ts
export const routes = ({ loadRemoteModule }: NativeFederationResult): Routes => [
	{
		path: '',
		pathMatch: 'prefix',
		component: LayoutWrapperComponent,	
		children: [
			(...)
			{
				path: MenuItemPathEnum.xxx,
				loadChildren: () => loadRemoteModule('xxx', './routes').then((m: any) => m.XXXRoutingModule),
			(...)

XXX microfrontend

// federation.config.js
import { withNativeFederation, shareAll } from '@softarc/native-federation/config';
import { federationSharedSkip } from '../shared/src/federation.config.shared.js';

export default withNativeFederation({
  name: 'xxx',
  exposes: {
	  './routes': './projects/xxx/src/app/app.routes.ts',
  },

  shared: {
	...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto', build: 'package' }),
  },

  skip: [
	...federationSharedSkip
  ],

  features: {
	mappingVersion: true,
	ignoreUnusedDeps: true
  },
});

// app.routes.ts
@NgModule({
	imports: [RouterModule.forChild(routes)],
	providers: [
		// (some services, guards, injection tokens)
	]
})
export class XXXRoutingModule { }

We see:

chunk-MTTUFZS3.js:82 ERROR RuntimeError: NG0203: 
The `InjectionToken router duplicate forRoot guard` token injection failed. `inject()` function must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. 
Find more at https://v21.angular.dev/errors/NG0203

The error looks like I'm using RouterModule.forRoot() in microfrontends, but I'm not doing that.

I have no clue what to do next, because currently every try gives me another kind of error and previously RC4/RC8 app worked correctly.
All components in the project are standalone - no modules (only modules in the project are these <>RoutingModule to load microfrontend routes by shell)

[Aukevanoost]

Right.

The first issue you mentioned is kinda fair, because @angular/common and @angular/router are runtime libraries. And I'm not entirely sure about the cdk package but maybe it's runtime as well!

Now the other issue is actually interesting.

function must be called from an injection context such as a constructor, a factory function

This is an interesting cue. It means the inject in the authService is not in an injection context. Do you perhaps have shared internal libraries?

Personally I think it has something to do with loadChildren: () => loadRemoteModule('xxx', './routes').then((m: any) => m.XXXRoutingModule), but I'll have to replicate the setup to know for sure.

You said this broke at RC9? The only significant change was support for globs in internal shared libraries https://github.com/native-federation/native-federation-core/releases/tag/v4.0.0-RC9. Do note that that's hardwired to @angular-architects/native-federation 21.1.9 https://github.com/native-federation/angular-adapter/releases/tag/v21.1.9.

Does it still break a full revert, those package versions and ignoreUnusedDeps: true ?

[h4570-work]

Do you perhaps have shared internal libraries?

Yes, and AuthService is in shared library.

My workflow look like this:

// package.json
	"devDependencies": {
		(...)
		"ng-packagr": "^21.2.0",
		"shared": "file:dist/shared",
		(...)
	}

// angular.json
(...)
	"projects": {
        (...)
		"shared": {
			"projectType": "library",
			"root": "projects/shared",
			"sourceRoot": "projects/shared/src",
			"prefix": "lib",
			"architect": {
				"build": {
					"builder": "@angular/build:ng-packagr",
					"configurations": {
						"production": {
							"tsConfig": "projects/shared/tsconfig.lib.prod.json"
						},
						"debug": {
							"tsConfig": "projects/shared/tsconfig.lib.json"
						}
					},
					"options": {
						"tsConfig": "projects/shared/tsconfig.lib.json"
					},
					"defaultConfiguration": "debug"
				(...)

// ng-package.json
{
	"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
	"dest": "../../dist/shared",
	"lib": {
		"entryFile": "src/index.ts",
		"styleIncludePaths": [
			"src/styles"
		]
	},
	"assets": [
		"styles/*.scss"
	]
}

I'm testing app via ng build shared and then ng serve <shell, xxx>

Does it still break a full revert, those package versions and ignoreUnusedDeps: true ?

I will try to check it in couple of days.

[Aukevanoost]

Right, since I am not familiar with the whole codebase I am taking some assumptions, but the error now makes a bit more sense since your remote and host receive their own version of the shared lib (since it's in devDependencies), it's even incorporated in the bundle. And since you're also not sharing @angular/core, they all receive their own injection context (the shell and the mfe). This means you'll have to share @angular/core (and @angular/common) to make this work.

I am currently working on an example application (tractor store) which switches the whole subroutes to more agnostic "request-for-route" events through a shared eventbus. This decouples your host completely from the remote and eliminates all routing issues. Might be overkill for you now but worth a look if you feel like decoupling your micro frontends more. Here's the code (it's still WIP but already works) https://github.com/native-federation/angular-examples/tree/main/tractor-store. Hope this helps :)