Angular 18 Microfrontend with Native Federation: Slow Build After Small Changes

I am working on an Angular 18 microfrontend setup using Native Federation. I have two Angular applications (App1 and App2) and a locally linked Angular library (my-lib).

The issue: Any small change (even a minor update in a component) triggers a long recompilation time, making development slow. Seems like, every small change rebuilds the whole application.

Setup:

Angular 18 Library linked via npm link Running with ng serve

How can I reduce the build time when making small changes in an Angular 18 microfrontend with Native Federation?

app1 (federation-config.js):


const skipPkgs = ['@apollo/client', 'grapghql', 'libphonenumber-js'];

const includePkgs = [];

const sharedPackages = shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' });
const filteredPackages = Object.keys(sharedPackages)
.filter((pkgName) => !skipPkgs.some((skipPkg) => pkgName.includes(skipPkg)) || includePkgs.some((includePkg) => pkgName === includePkg))
.reduce((obj, key) => {
obj[key] = sharedPackages[key];
return obj;
}, {});

module.exports = withNativeFederation({
name: 'dvss-frontend-client-management-mf',

exposes: {
'./client': './src/app/app.component.ts',
// './workspace': './src/app/features/workspace/workspace.routes.ts',
// './tenant': './src/app/features/tenant/tenant.routes.ts',
// './employee': './src/app/features/employee/employee.routes.ts',
'./services': './src/app/features/services/services.routes.ts',
// './community-feed': './src/app/features/community-feed/community-feed.routes.ts',
// './club-member': './src/app/features/club-member/club-member.routes.ts',
// './notification-handler': './src/shared/services/notification-action-handler.service.ts'
},

shared: {
...filteredPackages,
},

skip: [
'rxjs/ajax',
'rxjs/fetch',
'rxjs/testing',
'@compodoc/compodoc',
'depcheck',
'prettier',
'prettier-eslint',
// Add further packages you don't need at runtime
],

// Please read our FAQ about sharing libs:
// https://shorturl.at/jmzH0
});


app2 (federation.manifest.json):

{
"client-management": "http://localhost:4201/remoteEntry.json"
}

Continue reading...