{"id":2562,"date":"2021-02-25T12:23:24","date_gmt":"2021-02-25T12:23:24","guid":{"rendered":"https:\/\/salientsoft.co.uk\/?p=2562"},"modified":"2021-02-25T12:23:24","modified_gmt":"2021-02-25T12:23:24","slug":"angular-11-remote-loading-of-angular-element-from-separately-deployed-webpack-bundle","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=2562","title":{"rendered":"Angular 11 – remote loading of Angular Element from separately deployed webpack bundle"},"content":{"rendered":"\n

This follows on from my original post here<\/strong> <\/a>for Angular 6.<\/p>\n

In Angular 11, the up-and-coming approach to this is to use Module Federation for remote loading of microapps\/micro-frontends. Manfred Steyer has a new article series on this whole approach here<\/strong><\/a>, and the second article about using Angular for this may be found here<\/strong><\/a>.<\/p>\n

My issue with module federation at present is that it is still appears too nascent to simply ‘just work as standard’ with angular – the above posts need a number of workarounds including the use of yarn, and I was unwilling to switch to this method just for my present requirement which is just the generation of simple proof of concept work.<\/p>\n

At present, I am therefore continuing to use <\/span>my original approach as above<\/strong><\/a> for my POC work, as it still works with Angular 11. I have tweaked the approach a little to allow performing production builds, by disabling the hashes added to the filenames (I already use my own alternative method for cache busting\/cache avoidance using a query string parameter). Details are shown below.<\/span><\/p>\n

package.json scripts section<\/strong><\/p>\n

\n
{
  \"name\": \"microapp-fabric-prototype\",
  \"version\": \"0.0.0\",
  \"scripts\": {
    \"ng\": \"ng\",
    \"start\": \"ng serve\",
    \"prebuild\": \"npm run scss\",
    \"build\": \"ng build\",
    \"postbuild\": \"node post-build.js\",
    \"test\": \"ng test\",
    \"lint\": \"ng lint\",
    \"e2e\": \"ng e2e\",
    \"scss\": \"npm run scss1\",
    \"scss1\": \"cd src\/assets\/resources\/themes\/salient-v11-violet && sass theme.scss:theme.css --source-map .\",
    \"prebuildProd\": \"npm run scss\",
    \"buildProd\": \"ng build --prod --output-hashing none\",
    \"postbuildProd\": \"node post-build-prod.js\"
  },<\/pre>\n<\/blockquote>\n
post-build.js<\/strong><\/p>\n
\n
\/* Do post build actions on the webpack bundle.
 * Rename the webpack jsonp objects throughout, to prevent invalid multiple bootstraps due to name collisions
 * This is due to an angular bug - see here: https:\/\/github.com\/angular\/angular\/issues\/23732
 * This script requires the npm replace package: https:\/\/www.npmjs.com\/package\/replace
 * To install use: \"npm install replace -g\" *\/

var replace = require(\"replace\");

doWebpackReplace('MicroappFabric','microapp-fabric-prototype',
 ['main.js', 'polyfills.js', 'runtime.js', 'vendor.js']);

function doWebpackReplace(name, filename, paths) {
 replace({
   regex: '\\\\[\"webpackJsonp\"\\\\]',
   replacement: `[\"webpackJsonp${name}\"]`,
   paths: paths.map((p) => `dist\\\\${filename}\\\\${p}`),
   recursive: false,
   silent: false,
 });
}<\/pre>\n<\/blockquote>\n
post-build-prod.js<\/strong><\/p>\n
\n
\/* Do post production build actions on the webpack bundle.
 * Rename the webpack jsonp objects throughout, to prevent invalid multiple bootstraps due to name collisions
 * This is due to an angular bug - see here: https:\/\/github.com\/angular\/angular\/issues\/23732
 * This script requires the npm replace package: https:\/\/www.npmjs.com\/package\/replace
 * To install use: \"npm install replace -g\" *\/

var replace = require(\"replace\");

doWebpackReplace('MicroappFabric','microapp-fabric-prototype',
 ['main.js', 'polyfills.js', 'runtime.js']);

function doWebpackReplace(name, filename, paths) {
 replace({
   regex: 'window\\\\.webpackJsonp',
   replacement: `window.webpackJsonp${name}`,
   paths: paths.map((p) => `dist\\\\${filename}\\\\${p}`),
   recursive: false,
   silent: false,
 });
}<\/pre>\n<\/blockquote>\n
At present, I will continue to monitor the situation with Module Federation, and will likely switch to using it when it really is working ‘out of the box’ with no tweaks or complications.<\/p>\n
\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"
This follows on from my original post here for Angular 6. In Angular 11, the up-and-coming approach to this is to use Module Federation for remote loading of microapps\/micro-frontends. Manfred Steyer has a new article series on this whole approach here, and the second article about using Angular for this may be found here. My […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[198,1,77,223],"tags":[],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2562"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2562"}],"version-history":[{"count":8,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2562\/revisions"}],"predecessor-version":[{"id":2570,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2562\/revisions\/2570"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}