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

Vue-bootstrap spinbutton form with customizable parameters

What could be causing the issue with the custom Button component not functioning correctly on hover when using MUI Button alongside Tooltip

JQuery failing to trigger AJAX function

What is the process for displaying all cookies in node.js?

Running `ng start angularProject` or `npm install` will generate additional files in the project's

You are unable to access the array beyond the scope of the function

When an input event is dispatched in a unit test, the value changes of a form are not activated

Ways to execute a function when a button is clicked with a shared variable?

how to implement a delay in closing a window using JavaScript

Guide on integrating buefy (a vue.js component library) into your Laravel blade template

Utilizing Angular 2 and Node JS for both backend and frontend development

Identify the difference between a regular function and a constructor in JavaScript

Utilize Pipe for every instance of a variable in the Controller

How do I inform Jest that spaces should be recognized as spaces?

Troubleshooting Issue: Angular 6 - Authentication token interceptor not including headers

troubles with compatibility between bootstrap.css and IE11

Is there a way to create a function that can show the pathway on the Browser Console?

Attaching a $UI element to a <div> tag with JQuery may result in unexpected errors and issues

Transform a C# DateTime object into a JavaScript date format

Ways to retrieve data from ngrx and display it in a component file