Consuming an Angular Element (Ang 18) in AngularJS getting 404 error

Question

I am trying to do an Angular upgrade slowly, last resort, by having Angular 18 "angular elements" (web components) using those Angular 18 web components inside an AngularJS (1.8.3) site. However, just even having a Hello World component shows "hello world", but also gives a 404 console error. My more complex element will not load or show anything.

Error:

Failed to load resource: the server responded with a status of 404 (Not Found) Refused to execute script from 'http://localhost:53390/simple-web-component.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

I compiled the web component in Angular 18 as many tutorials show and am merging it together into one JS file: simple-web-component.js.

And I am consuming the Angular 18 web component (Angular element) in AngularJS by:

<div>
    <script src="web-components.js"></script>
    <web-component-contact-list></web-component-contact-list>
</div>

I encountered a similar issue when trying to embed my angular 18 element in vue.js. What worked for me is adding the script in the public folder of the vue.js project. — Yulia Galiulina
– Yulia Galiulina, Commented Oct 8, 2024 at 9:23

sparanza · Accepted Answer · 2024-10-09 18:11:16Z

0

So, with very little documentation online anywhere - answer - I was consuming the web component Wrong! By shockingly deleting the script tag, AngularJS somehow just "knows" that this web component exists (well, it is in the same directory of the consuming component). So my error was using the script tag, despite seeing a lot of online examples like that.

To correctly consume an Angular 18 web component from AngularJS I did:

<div>
  <web-component-contact-list></web-component-contact-list>
</div>

Other details:

I had to have my web-components.js in the same folder as the AngularJS file that is consuming it.
I had to change my Angular 18 main.ts to use createApplication() instead of bootstrapApplication()

answered Oct 9, 2024 at 18:11

sparanza

211 gold badge1 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Consuming an Angular Element (Ang 18) in AngularJS getting 404 error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related