Angular Element - Custom web component - bundle

Question

I have developed a custom web component that I am using in a Chrome Extension (Content). This Angular web component worked fine in Angular 12. I bundled all the scripts and loaded them in various web pages without issues. So I got this bright idea that I wanted upgrade to Angular 15 (15.2.2). So I converted the project to Angular 15. So I build the project, and it generates the following JavaScript files.

chunk-WZJ22MYD main polyfills

In the old method (Angular 12), I concatenated all the files into one JS file. Which I did try, and it failed with an import issue. So I tried a new approach and individually created script elements for each JavaScript files (specifying type=module). No matter what I do, I get the following error in the console.

Uncaught Syntax Error: Cannot use import statement outside a module

Followed by another error. Uncaught Error: NG0908

This is a simple singular component.

I have read several articles on the web about specifying the type in the package file, but I get a slew of compilation errors when I do that.

I am looking for a procedure to properly package the JS into a bundle, and include this script in a web page.

Any suggestions would be greatly appreciated. I know I could fix this by going back to Angular 12, so please do not tell me that. 😊

I would appreciate any thoughts.

Thank you!

Tom Lee · Accepted Answer · 2023-03-16 15:06:38Z

Ok, after pulling my hair out for the past week I figured it out. I must say if you are upgrading your web components to Angular 14 (or greater) look at the example and you will discover the changes that you have to make.

Angular Site

Since I am an experienced Angular Element developer and have done multiple elements, I skipped some very basic steps. With the example I noticed that “browser-esbuild” in the angular.json file was missing. I quickly changed that to "browser" and the errors ceased. Many examples all over the web such as the below link specify “browser-esbuild” and that is what I looked at when I started conversion without carefully reading - my bad :(.

Angular Experts

Once I made the change and removed the module type from my element creation. Everything worked fine.

let s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = chrome.runtime.getURL(
        'src/content_scripts/web/content-component.js'
    );
    s.onload = function () {
      const elem = document.createElement('my-super-cool-angular-element')
    };
    try {
        (document.head || document.documentElement).appendChild(s);
    } catch (e) {}

Lucas Simões · Accepted Answer · 2024-01-23 23:31:44Z

0

You might have concatenated the files without considering their order.

The polyfills.js file's contents must come first in the final file. If the main.js content appears at the beginning of the final javascript file, you'll encounter this error since the polyfills haven't been loaded yet.

To resolve this, ensure you concatenate the files in the following sequence: polyfills.js, runtime.js, and finally main.js.

answered Jan 23, 2024 at 23:31

Lucas Simões

6576 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular Element - Custom web component - bundle

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related