Angular MF with assets (images) in embedded app

[sevaru]

It's more question then issue.

Is there any practice on use images in html and css
cause by defaul if I use pathes like ../../assets/pic.png

when I open embedded app in shell app urls looking in shell app host e.g. localhost:4200 instead of localhost:4201 in angular example.

I would really appreciate any suggestions on that

[cstefan]

Good point! For small SVGs I would just inline them in the compilation. When working with Less you have data-uri('startup.svg')
For bigger pictures I would look at setting the whole path with the help of a variable with the entry-point.
background-image: url($entry-point + '/startup.png');

But, ... I see many issues.
Have you found anything else?

[sevaru]

yes @cstefan thank, we inline small assets too.

but we have problems with fonts, and big assets for now.

No i have to postpone my research for now.
But if I came back to it I'll let you now.

[ScriptedAlchemy]

anything webpack can process can be federated, images, css, side effects, the works. Im not sure if this is an angular specific issue

[vaindil]

I'm running into this issue as well. Angular typically loads assets against the base URL of its site, which is set with the <base> tag in index.html. (I have no idea if this is typical of other frameworks too, I only have experience with Angular.) The sub-app's base path is apparently ignored with the standard Webpack setup for federation--only the shell app's base is used, which leads to this issue.

Still trying to work on this, but I'm new to Webpack config stuff since Angular has handled it all for me in the past.

[ScriptedAlchemy]

Don't know how to handle angular specific. But in webpack the file-loader accepts a post transform option which you could use to infer the url internally

Webpack usually figures it out with some parsing of document.currentScript

[ScriptedAlchemy]

Looks like there's a way to set this in webpack instead of depending on markup. Not sure how but someone told me it's possible. If so then we can get an at runtime base assignment

[axell9641]

Did anybody find a way to share static resources (images) between the remotes and the shell?

[neubs-bsi]

You can declare shared assets from a library in the webpack config in the shared option of your ModuleFederationPlugin:

          '.shared/assets': {
            singleton: true,
            eager: true,
            import: './shared/assets',
            requiredVersion: require("../../package.json").version,
          },

Just add this to both webpack configurations. It should then use the assets from your remote as well as your shell. This works if you have a monorepo and a shared assets library.

[Markiewic]

I think I solved this problem relatively well, but I still want to explore a more convenient solution.

You need to use the variable __webpack_public_path__ from webpack to access the base address from which any remote module was loaded.

For example, to access an asset from a remote module, you can specify its path like this:
some.component.ts (component from remote)

declare const __webpack_public_path__: string;

@Component(...)
export class SomeComponent {
  public publicPath = __webpack_public_path__; // here will be smth like `localhost:4201/`
}

some.component.html

<img [src]="publicPath + 'assets/some-asset.png'" />

some-asset.png is served by remote, but will be available from both the host and remote, since we are building the correct link to it.

To simplify your development, you can provide a variable in the exposed modules and make pipe that will build the correct link itself.

<img [src]="'assets/some-asset.png' | localAsset" />