X Tutup
The Wayback Machine - https://web.archive.org/web/20220105000457/https://github.com/angular/angular/issues/44128
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Angular elements does't run in production #44128

Closed
gcherem opened this issue Nov 10, 2021 · 4 comments
Closed

Angular elements does't run in production #44128

gcherem opened this issue Nov 10, 2021 · 4 comments
Labels
comp: elements
Milestone
needsTriage

Comments

@gcherem
Copy link

@gcherem gcherem commented Nov 10, 2021

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

Angular Element (https://angular.io/guide/elements) doesn't run in production. If both host application and element application have the --prod flag, you are going to see the error bellow. Otherwise (at least one of them without --prod flag), everything works fine.

Please provide a link to a minimal reproduction of the bug

https://github.com/gcherem/problem-with-elements

Please provide the exception or error you saw

main.js:1 DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "my-widget" has already been used with this registry
    at CustomElementRegistry.K.t.<computed> [as define] (http://localhost:8887/polyfills.js:1:39666)
    at e.ngDoBootstrap (http://localhost:8887/main.js:1:116837)
    at e._moduleDoBootstrap (http://localhost:8887/main.js:1:85899)
    at http://localhost:8887/main.js:1:85340
    at l.invoke (http://localhost:8887/polyfills.js:1:20438)
    at Object.onInvoke (http://localhost:8887/main.js:1:78683)
    at l.invoke (http://localhost:8887/polyfills.js:1:20378)
    at s.run (http://localhost:8887/polyfills.js:1:15850)
    at http://localhost:8887/polyfills.js:1:30646
    at l.invokeTask (http://localhost:8887/polyfills.js:1:21056)

Please provide the environment you discovered this bug in

Host application:
Angular CLI: 11.2.15
Node: 14.15.1
OS: darwin x64

Angular: 11.2.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.15
@angular-devkit/build-angular   0.1102.15
@angular-devkit/core            11.2.15
@angular-devkit/schematics      11.2.15
@angular/cli                    11.2.15
@schematics/angular             11.2.15
@schematics/update              0.1102.15
rxjs                            6.6.7
typescript                      4.1.6

Widget:
Angular CLI: 11.2.15
Node: 14.15.1
OS: darwin x64

Angular: 11.2.14
... animations, common, compiler, compiler-cli, core, elements
... forms, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.15
@angular-devkit/build-angular   0.1102.15
@angular-devkit/core            11.2.15
@angular-devkit/schematics      11.2.15
@angular/cli                    11.2.15
@schematics/angular             11.2.15
@schematics/update              0.1102.15
rxjs                            6.6.7
typescript                      4.1.6

Anything else?

Yes. The repository https://github.com/gcherem/problem-with-elements has both host (host application) and widget (angular element).

I used Web Server for Chrome for the widget.

If you run the host app with start-prod and the widget with build-prod, you are going to see the error. If you run the host with start or the widget with build, everything will work.
@gcherem gcherem changed the title Angular elements for production does't run Angular elements does't run in production Nov 10, 2021
@ngbot ngbot bot added this to the needsTriage milestone Nov 10, 2021
@flash-me
Copy link
Contributor

@flash-me flash-me commented Nov 10, 2021 •
edited

Ok this is really WEIRD.

I added some logs to the AppModule of the Widgets build:

image

And this is what i get (both production build):
image

Seems like the scripts in the index.html are being executed TWICE???

I am honestly really interestied in what is going on here 😲

P.S. @gcherem

  1. That's also the reason why you get the error, the AppModule of the Widget is being bootstrapped twice, and since the custom element is already registered, trying to register it again fails. You could check if there is already a custom element registered with a specific tag name with customElements.get(NAME), but this does not explain WHY THE SCRIPT IS BEING EXECUTED TWICE 😨😨😨
  2. In prod build there is no vendor.js chunk created. (But for this issue, this is not relevant)

cheers
flash ⚡

@gkalpak
Copy link
Member

@gkalpak gkalpak commented Nov 16, 2021

I believe this is essentially a duplicate of #23732. That is an old issue and the specifics might be outdated, but the general idea of the problem still holds:

Fundamentally, this is a packaging/bundling issue and our tooling does not currently support this usecase.
See the thread at #23732 (comment) for more details.

In the mean-time, you probably have to rely on some 3rd-party tools and custom configs.
There are several resources online, such as this, this or this (and although they are not super up-to-date, they should be a good starting point).

I am going to close this issue, since the general problem of being able to more easily consume independently built Angular Elements is being tracked in #25421.

@gkalpak gkalpak closed this Nov 16, 2021
@flash-me
Copy link
Contributor

@flash-me flash-me commented Nov 16, 2021 •
edited

In the mean-time, you probably have to rely on some 3rd-party tools and custom configs.

Naa. My gut feeling tells me there are solutions with plain angular toolchain. Even for angular elements.

But could also be just some flatulences

P.S. Plain angular toolchain solution

cheers
flash ⚡

@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Dec 17, 2021

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 17, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
comp: elements
Projects
None yet
Milestone
needsTriage
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
@atscott @flash-me @gkalpak @gcherem
X Tutup