Cannot expose Component (native federation)

[markusahrweileramcon]

I was checking out other examples and cannot find code which is more than hello world. In a real world, I have to include components from other remotes, which is nowhere covered.

X [ERROR] File 'projects\system\src\app\menu\menu.component.ts' is missing from the TypeScript compilation. [plugin angular-compiler]

  Ensure the file is part of the TypeScript program via the 'files' or 'include' property.

So, in a default setup from angular, the tsconfig.app.json does NOT include any ts file. The tsconfig.federation.json seems to be copied from the app and so doesn't include any ts file.

What approach would be preferred to expose components which are not used in your remote, but has to be used by other remotes? Or would that be a shared libary, so the team for this remote would have 2 packages to maintain?

[muenchto]

What exactly do you mean by "include components from other remotes"? Can you give an example or sample code? Also, your posted error seems to be a compile time error, but native federation is not about compile time, its about runtime integration.

[markusahrweileramcon]

const {withNativeFederation, shareAll} = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({

  name: 'system',

  exposes: {
    './Component': './projects/system/src/app/app.component.ts',
    './Menu': './projects/system/src/app/menu/menu.component.ts', // added this line
  },

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

  skip: [
    'rxjs/ajax',
    'rxjs/fetch',
    'rxjs/testing',
    'rxjs/webSocket',
    // Add further packages you don't need at runtime
  ]

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

});

native federation adds a tsconfig dedicated to federation. So I would understand this as also compile time.

[manfredsteyer]

Well, normally NF is installed per project, so you also should have a federation.config.js per project

[markusahrweileramcon]

I'm not sure, how your comment does solve this. The problem still exists, that I can't export a component because it's missing in the generated tsconfig. The file was added as export in the federation.config.js in that particular project

[craPkit]

I ran into the same problem. (Using Nx, esbuild/Vite and Angular) I got the following message, for each Component in my exposes object during the build phase:

INFO Building federation artefacts ✘ [ERROR] File 'apps/federation-demo/src/app/features/demo/demo.component.ts' is missing from the TypeScript compilation. [plugin angular-compiler]

Turns out that including all (or at least the referenced) source files in your remote app's tsconfig.app.json solves the issue. also see https://stackoverflow.com/a/62118865/2795627