0

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
  • 11
  • 1
  • 3

1 Answers1

1

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) {}
Tom Lee
  • 11
  • 1
  • 3