Using systemjs as module loader #2
Conversation
| new HtmlWebpackPlugin({ | ||
| template: "./public/index.html" | ||
| }) | ||
| new CopyPlugin([ |
There was a problem hiding this comment.
Using the copy plugin to ensure serve.json is in the dist directory (so that cors works)
| "source": "**/*", | ||
| "headers": [ | ||
| { | ||
| "key": "Access-Control-Allow-Origin", |
There was a problem hiding this comment.
cors is needed for dynamically injected scripts from systemjs
| <script src="http://localhost:3003/remoteEntry.js"></script> | ||
| <script type="systemjs-importmap"> | ||
| { | ||
| "imports": { |
There was a problem hiding this comment.
Don't we need an org name here in the app names
There was a problem hiding this comment.
org names are a best practice but are not required.
| "start": "webpack --watch", | ||
| "build": "webpack --mode production", | ||
| "serve": "serve dist -p 3002" | ||
| "serve": "serve dist -p 3002 -s" |
There was a problem hiding this comment.
-s puts serve into single page app mode - always returns index.html
| }), | ||
| new HtmlWebpackPlugin({ | ||
| template: "./public/index.html", | ||
| chunks: ["main"] |
There was a problem hiding this comment.
No need to inject any scripts into html file anymore
frehner
left a comment
frehner
left a comment
There was a problem hiding this comment.
also, I think it would be valuable to add the import map to app2 and app3's HTML just so you can hit up any of those URLs directly and they still work.
but it looks good.
packages/01-host/public/index.html
Outdated
| <div id="root"></div> | ||
| <script src="https://unpkg.com/systemjs/dist/system.js"></script> | ||
| <script> | ||
| System.import('app_one') |
There was a problem hiding this comment.
is this one necessary? it seems to be importing the remoteEntry.js for app_one, but I didn't think that was necessary for the app that's running the main.js script to also run the remoteEntry script
I could be wrong though.
There was a problem hiding this comment.
Good question - probably not. I’ll double check once I get a chance. I added it to mirror how the master branch script tags both the remote entry and the main js file
There was a problem hiding this comment.
I verified it's unneeded - removed it.
| new ModuleFederationPlugin({ | ||
| name: "app_one", | ||
| library: { type: "var", name: "app_one" }, | ||
| library: { type: "system" }, |
There was a problem hiding this comment.
oh, silly me. removing the name removes the named portion of the module. that makes sense.
There was a problem hiding this comment.
Yeah haha I ran into the same problem with the named register but then found this way of removing the name
| output: { | ||
| publicPath: "http://localhost:3001/" | ||
| publicPath: "http://localhost:3001/", | ||
| libraryTarget: "system" |
There was a problem hiding this comment.
Compiles code to System.register format, see https://single-spa.js.org/docs/recommended-setup/#systemjs or https://single-spa.js.org/docs/recommended-setup/#systemjs for details.
… and 3003 still works. (#1)
|
@joeldenning |
|
SystemJS allows you to control the download URL of microfrontends via import maps, which opens up tools like import-map-deployer and import-map-overrides for CI/CD and development workflows. SystemJS also has some nice features like live bindings for cross-microfrontend imports, a registry api for inspecting and deleting in-browser modules, etc. |
|
Hi, i am trying to add latest angular version i.e. angular 14 as parcel application, added multiple angular 5 applications as MFE which are working fine but how to access and run angular 14 as parcel app on click of button from angular 5, I tried this but getting error for angular 14 when try to access angular 14 application name as 'myapp' getting below error when trying to access - How to resolve this? if i am running this myapp as MFE independently it is running fine but when try to load it as child application getting above error |
| } | ||
| }, | ||
| { | ||
| parser: { |
| <body> | ||
| <div id="root"></div> | ||
| <script src="https://unpkg.com/systemjs/dist/system.js"></script> | ||
| <script> |
There was a problem hiding this comment.
Don't you also need to call System.import('app_one')? How is the remoteEntry file being loaded?
7 participants
Sharing this for feedback and informational purposes - not to have you merge it in.