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/appponent.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:
  // 
});

app2 (federation.manifest.json):

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