The presence of an Angular Element within an Angular application can lead to a problematic cycle of constant reloading,

Question

The presence of an Angular Element within an Angular application can lead to a problematic cycle of constant reloading,

, I am encountering issues with integrating Angular Elements as plugins into my Angular application. The problem arises when building the element with "--prod" - it functions properly with "ng serve" in my development setup but causes infinite reloading when using "ng serve --prod" or after running "ng build --prod" for production. An attempt to mitigate this involved building the element with "--optimization=false", which worked for the production app but not in the development setup. I had hoped that building an Angular Element with "--prod" would work seamlessly for both scenarios. Is there a feasible solution to resolve this discrepancy? Further details reveal our objective at work of implementing configurable plugins within our Angular site where the server dictates the active plugins. While exploring dynamic loading of Angular modules, we encountered challenges that were set aside for future consideration. Subsequently, we explored Angular Elements for its potential, only to face obstacles in adhering to the recommended build process. Initial steps included setting up a core application as the plugin host and creating an Angular Element for the plugin itself. Modifications were made to various configuration files and code snippets according to online tutorials and recommendations. The overall structure entailed scripts in the package.json file to facilitate building processes, along with adjustments to component templates and TypeScript files to accommodate the desired functionality. Despite the workaround implemented to ensure functionality in both development and production environments by loading different builds based on optimization settings, it leaves room for improvement regarding optimized code usage. For further insights and hands-on experience with the issue, you can refer to the GitHub repository link provided above. Your feedback and suggestions are welcome as we strive to enhance this integration for a seamless user experience.

javascript angular typescript plugins angular-elements

Answer 1

Answer №1

Success! I've cracked the code!

The culprit, as it turns out, is running multiple webpack projects simultaneously in the same environment. Essentially, when you compile projects with webpack, they undergo some runtime bootstrapping that relies on a specific global function (webpackJsonp). When more than one webpack setup tries to perform this bootstrapping in the identical context, it triggers the issues outlined here. (For a more detailed breakdown, check out this explanation - https://example.com/unique-link-here)

A GitHub comment offers a workaround without diving into the step-by-step process - https://example.com/different-link-here. Below, I'll share my tailored fix.

We can tweak the webpack configuration to rename the webpackJsonp for our web component, ensuring harmony between different Angular projects (or any webpack-built applications).

The Fix

To start, we need to add the @angular-builders/custom-webpack package to modify the default webpack setup in Angular CLI.

npm install --save-dev @angular-builders/custom-webpack

Next, we need to update our angular.json file to utilize the new builder and introduce a fresh property value, customWebpackConfig, under options. This feature specifies a path to a new file we're about to create and sets a merge strategy to append configurations to the output section of webpack settings.

angular.json
...
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "mergeStrategies": { "output": "append"}
            },
...

Lastly, we simply create an extra-webpack.config.js file in the directory containing angular.json. The file should include the following snippet:

module.exports = {
    output: {
        jsonpFunction: '<webcomponent-prefix>-webpackJsonp'
    }
}

If you alter the value of jsonpFunction from its default

webpackJsonp</code, the setup will still function appropriately. Personally, I chose to preserve the function name but incorporate a prefix for my web component application. Ideally, you could have multiple webpack setups coexisting in the same environment, provided each possesses a unique <code>jsonpFunction

.

Recompile your web component, and voilà, problem solved!

Answer 2

Success! I've cracked the code!

The culprit, as it turns out, is running multiple webpack projects simultaneously in the same environment. Essentially, when you compile projects with webpack, they undergo some runtime bootstrapping that relies on a specific global function (webpackJsonp). When more than one webpack setup tries to perform this bootstrapping in the identical context, it triggers the issues outlined here. (For a more detailed breakdown, check out this explanation - https://example.com/unique-link-here)

A GitHub comment offers a workaround without diving into the step-by-step process - https://example.com/different-link-here. Below, I'll share my tailored fix.

We can tweak the webpack configuration to rename the webpackJsonp for our web component, ensuring harmony between different Angular projects (or any webpack-built applications).

The Fix

To start, we need to add the @angular-builders/custom-webpack package to modify the default webpack setup in Angular CLI.

npm install --save-dev @angular-builders/custom-webpack

Next, we need to update our angular.json file to utilize the new builder and introduce a fresh property value, customWebpackConfig, under options. This feature specifies a path to a new file we're about to create and sets a merge strategy to append configurations to the output section of webpack settings.

angular.json
...
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "mergeStrategies": { "output": "append"}
            },
...

Lastly, we simply create an extra-webpack.config.js file in the directory containing angular.json. The file should include the following snippet:

module.exports = {
    output: {
        jsonpFunction: '<webcomponent-prefix>-webpackJsonp'
    }
}

If you alter the value of jsonpFunction from its default

webpackJsonp</code, the setup will still function appropriately. Personally, I chose to preserve the function name but incorporate a prefix for my web component application. Ideally, you could have multiple webpack setups coexisting in the same environment, provided each possesses a unique <code>jsonpFunction

.

Recompile your web component, and voilà, problem solved!

The presence of an Angular Element within an Angular application can lead to a problematic cycle of constant reloading,

Answer №1

Similar questions

activate a single on.click event to trigger additional actions - utilizing javascript and jQuery

I encountered an error stating "angular not found" when attempting to dynamically load my Angular scripts

The Bootstrap modal-backdrop dilemma requiring JavaScript intervention

What are some effective ways to stretch specific muscles?

"Hidden panels in Sencha Touch only respond to show() and hide() methods after a resize event

Handling Errors with Symfony 5 JSON Responses and VueJS Using Axios for Customized Error Messages

Exploring LZMA compression in conjunction with next.js

Click on the button to add a new question and watch as another row magically appears

In TypeScript, what specific term denotes a type of data?

What is the process for retrieving information from a database in Django when the submit button is clicked?

Incorporate Aria Label into a Website Link

Encountering difficulties in generating a binary from a nodejs application with pkg

Guide to sending a HTTP POST request with parameters in typescript

AgGrid supports multi-line content within its cells

Setting up a Node.js application with Nginx on DigitalOcean

Ways to stop two JavaScript files from running at the same time

Why are these additional curly brackets added within an else statement?

Retrieve the response status using a promise

Skipping the configuration file during the process of converting Node.js files to an executable using pkg

What is the best way to create a navigation bar that opens on the same page when clicked?