Because of the structure of our app inside a native website, I had to set the __webpack_public_path__ .
But now in the new module federation setup for angular the bootstrap.ts script is imported and the __webpack_public_path__ is not set anymore.
Is there a way I can set the webpack_public_path during runtime with the latest way of hoisting the bootstrap.ts?
main.ts:
import('./bootstrap').catch(err => console.error(err));
bootstrap.ts
const getBaseOfModules = (script: string): string => {
const src = document.querySelector<HTMLScriptElement>(`[src*="${script}"]`).src;
return `${src.substring(0, src.lastIndexOf('/'))}/`;
};
__webpack_public_path__ = getBaseOfModules('main');
initAngularApp();
The main.js file and other lazy loaded modules are served at http://some/deep/path/main.js
It looks like angular gets the path based from the url of the last js file.
Addition: I have tried this according to documentation.. but that doesnt work'. This script will be loaded also inside a lazyloaded module.
publicpath.ts
declare let __webpack_public_path__;
const getBaseOfModules = (script: string): string => {
const src = document.querySelector<HTMLScriptElement>(`[src*="${script}"]`).src;
return `${src.substring(0, src.lastIndexOf('/'))}/`;
};
// set the on the fly public path absolute for module lazy loading see https://webpack.js.org/guides/public-path/
export default __webpack_public_path__ = getBaseOfModules('main');
main.ts
import('@lib-utils/public-path');
import('./bootstrap').catch(err => console.error(err));
