Skip to content

Can not build Angular libraries with multiple defer blocks #59922

@nivekcode

Description

@nivekcode

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

core

Is this a regression?

Yes

Description

Summary

If we build an Angular library and use multiple @defer blocks to defer the same component the library build fails with the following error:

dist/my-awesome-lib/esm2022/lib/my-awesome-lib.component.mjs (17:294): Duplicate argument name "FooComponent"

Code example

my-awesome-lib.component.ts

    @defer (on idle){
      <lib-foo/>
    }

    @defer (on idle){
      <lib-foo/>
    }

Use case

Imagine I have a library that provides a header with some header items. The header items are defered since they may contain some havy components with functionality that is only needed on click. Now why do we need two defer blocks? We want to provide two headers. One for desktop and one for mobile.

Reproduction example

This bug only affects build and not server. Therefore a stackblitz reproduction is not helpful. So I made a reproduction example here: https://github.com/nivekcode/libs-with-defers

To reproduce the following steps are required:

  • Checkout
  • npm i
  • npm run build

Please provide a link to a minimal reproduction of the bug

https://github.com/nivekcode/libs-with-defers

Please provide the exception or error you saw

dist/my-awesome-lib/esm2022/lib/my-awesome-lib.component.mjs (17:294): Duplicate argument name "FooComponent"

Please provide the environment you discovered this bug in (run ng version)

Latest Angular (19.1.5)

Anything else?

No response

Metadata

Metadata

Assignees

Labels

area: compilerIssues related to `ngc`, Angular's template compilerbugcore: deferIssues related to @defer blocks.state: has PR

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions