0

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"
}

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.