TypeError: Failed to resolve module "@angular/platform-browser" in Angular Native Federation...

I'm setting up an Angular application as a shell using @angular-architects/native-federation. Upon application startup, I encounter the following error in the browser console: **

TypeError: Failed to resolve module specifier "@angular/platform-browser". Relative references must start with either "/", "./", or "../". main.ts:6 (anonymous)

** (The error points to line 6 of main.ts which is the dynamic import('./bootstrap') call) This error occurs after initFederation() successfully completes (or seems to) in src/main.ts and during the attempt to dynamically import src/bootstrap.ts. This suggests that the import map, which Native Federation should generate and inject, is not correctly resolving Angular's core packages like @angular/platform-browser. I'm working within an Angular workspace structure. My shell application is located at projects/mini-apps-tracker-angular/. Here's my relevant configuration: projects/mini-apps-tracker-angular/federation.config.js (Shell Config): This file is located at the root of my shell application project.

// projects/mini-apps-tracker-angular/federation.config.js

const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');
module.exports = withNativeFederation({
// Shell does NOT have a 'name'
// Shell does NOT have 'exposes'
// Remotes are configured via federation.manifest.json or could be here
// remotes: {
// // 'MyNewRemote': 'http://localhost:4203/remoteEntry.json'
// },
shared: {
...shareAll({
singleton: true,
strictVersion: true,
requiredVersion: 'auto',
// includeSecondaries: true, // Tried with and without
}),
// Explicitly sharing a workspace library
'@mini-apps-tracker-angular/auth-lib': {
singleton: true,
strictVersion: true,
requiredVersion: 'auto',
}
},
skip: [ // Standard skips
'rxjs/ajax',
'rxjs/fetch',
'rxjs/testing',
'rxjs/webSocket',
]
});


// projects/mini-apps-tracker-angular/src/main.ts

import { initFederation } from '@angular-architects/native-federation';
initFederation()
.catch((err) => console.error('Federation Init Error:', err))
.then((_) => {
console.log('Federation initialized, attempting to bootstrap...');
return import('./bootstrap'); // Error seems to originate from this dynamic import not resolving sub-dependencies
})
.catch((err) => console.error('Bootstrap Chain Error:', err));
projects/mini-apps-tracker-angular/src/bootstrap.ts:


// projects/mini-apps-tracker-angular/src/bootstrap.ts

import { bootstrapApplication } from '@angular/platform-browser'; // This specifier fails to resolve
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error('Angular Bootstrap Error:', err));
projects/mini-apps-tracker-angular/tsconfig.app.json:


// projects/mini-apps-tracker-angular/tsconfig.app.json

{
"extends": "../../tsconfig.json", // Workspace root tsconfig
"compilerOptions": {
"outDir": "../../out-tsc/app",
"types": []
},
"files": [
"src/main.ts"
],
"include": [
"src/**/*.d.ts"
]
}


// projects/mini-apps-tracker-angular/tsconfig.federation.json

{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/app", // Path seems correct relative to workspace
"types": []
},
"files": [
"src/main.ts" // Points to the app's main entry
],
"include": [
"src/**/*.d.ts"
]
}


// projects/mini-apps-tracker-angular/src/assets/federation.manifest.json:

{
"MyNewRemote": "http://localhost:4203/remoteEntry.json"
}


//projects/mini-apps-tracker-angular/src/index.html:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MiniAppsTrackerAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>


What I've Checked/Tried: The error Failed to resolve module specifier "@angular/platform-browser" indicates the browser doesn't know how to locate this bare module specifier, which is the job of the import map. initFederation() is called before import('./bootstrap'). shareAll is used in federation.config.js. The federation.config.js is at the root of the shell project (projects/mini-apps-tracker-angular/). The tsconfig.*.json files seem standard for an Nx/Angular workspace setup. Cleared node_modules, dist, npm cache and reinstalled/rebuilt.

Continue reading...