JSFiddle - React, Tailwind, and code Playground

by sberube

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Remote Angular MFE Component - TestForms17</title>
</head>
<body>

  <div id="federated-component-container">Loading federated Angular component...</div>

  <!-- Load the remote entry for the federated module -->
  <script type="module">
    // Dynamically load remoteEntry.js as an ES module
    import("https://deklin.github.io/mfe-component/remoteEntry.js") // Replace with actual remoteEntry.js URL
      .then(async (container) => {
        try {
          // Initialize the shared scope if using Module Federation in module format
          await __webpack_init_sharing__("default");

          // Initialize the container
          await container.init(__webpack_share_scopes__.default);

          // Load the TestForms17 component exposed by the remote module
          const TestForms17Component = await container.get("TestForms17");

          // Here, TestForms17Component is the Angular component class.
          // Since JSFiddle or this plain HTML setup lacks an Angular environment,
          // we cannot directly render it as a real Angular component.

          // Display a message or placeholder indicating successful loading
          const containerDiv = document.getElementById("federated-component-container");
          containerDiv.innerHTML = `<p>Angular federated component loaded: ${TestForms17Component.name}</p>`;

        } catch (error) {
          console.error("Error loading federated Angular component:", error);
          document.getElementById("federated-component-container").innerText =
            "Error loading component. Check console for details.";
        }
      })
      .catch((error) => console.error("Failed to load remoteEntry.js:", error));
  </script>
</body>
</html>