Skip to content

@defer fails when using components exported with alias #63965

@dawidskowron

Description

@dawidskowron

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

core

Is this a regression?

No

Description

When using the @defer block with a component that is exported under an alias, Angular throws an error:
ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp')

Image

If the same component is used under its original name, everything works as expected.

@Component({
  ...
})
export class CounterComponent {}
// ✅ Works fine when exported original name
// export { CounterComponent } from './counter.component';

// ❌ Fails when exported under an alias
export { CounterComponent as MyCounterCmp } from './counter.component';
// ✅ Works fine when imported as original name
// import { CounterComponent } from './counter';

// ❌ Fails when imported alias MyCounterCmp
import { MyCounterCmp } from './counter';

@Component({
  ...
  template: `
    @defer {
      <my-counter-cmp />
    }
  `,
  imports: [MyCounterCmp],
})

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-exos4wjy?file=src%2Fapp%2Fapp.ts

Please provide the exception or error you saw

ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp')

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

Angular CLI: 20.3.2
Node: 20.19.1
Package Manager: npm 10.8.2
OS: linux x64
    

Angular: 20.3.1
... common, compiler, compiler-cli, core, platform-browser
... platform-server

Package                      Version
------------------------------------
@angular-devkit/architect    0.2003.2
@angular-devkit/core         20.3.2
@angular-devkit/schematics   20.3.2
@angular/build               20.3.2
@angular/cli                 20.3.2
@angular/ssr                 20.3.2
@schematics/angular          20.3.2
rxjs                         7.8.2
typescript                   5.9.2

Anything else?

I used the --no-hmr flag in StackBlitz to prevent deferred block dependencies from being loaded eagerly. With HMR enabled, Angular forces all @defer dependencies to load immediately, which defeats the purpose of testing their lazy behavior.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: coreIssues related to the framework runtimecore: deferIssues related to @defer blocks.

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions