Skip to content

Parser error when using defer on viewport #2474

@LeonEck

Description

@LeonEck

Description and reproduction of the issue

I wanted to try out the new 20.0.0-alpha.0 release today. Since it no longer suppresses parsing errors by default, it surfaced an issue that is also present in the latest 19 release (19.6.0).

Given a defer block with a viewport trigger like this:

@defer (on viewport) {
  <div></div>
} @placeholder {
  <div>Large component placeholder</div>
}

It throws: Parsing error: "viewport" trigger with no parameters can only be placed on an @defer that has a @placeholder block with exactly one root element node.

It works if the code is written without a line break in the placeholder:

@defer (on viewport) {
  <div></div>
} @placeholder {<div>Large component placeholder</div>}

The error message seems to originate from the Angular compiler: https://github.com/angular/angular/blob/d19669ca7ba1107d105ae30e78ed3c3df5bc26a3/packages/compiler/src/render3/r3_deferred_triggers.ts#L608
Maybe their check placeholder.children[0] instanceof t.Element is too optimistic? But the Angular build itself doesn't fail, so maybe they are expecting the HTML to be trimmed when reaching this place?

Versions

package version
@angular-eslint/template-parser 19.6.0
ESLint 9.27.0
node 22.15.0
# Please run `npx ng version` in your project and paste the full output here:

Angular CLI: 19.2.13
Node: 22.15.0
Package Manager: npm 11.3.0
OS: darwin arm64

Angular: 19.2.13
... cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.13
@angular-devkit/build-angular   19.2.13
@angular-devkit/core            19.2.13
@angular-devkit/schematics      19.2.13
@schematics/angular             19.2.13
rxjs                            7.8.2
typescript                      5.7.3
zone.js                         0.15.1
  • I have updated to the latest supported version of the packages and checked my ng version output per the instructions given here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    blocked:@angular/compilerThis issue requires changes to the @angular/compiler in order to be resolvedpackage: template-parserESLint custom parser which enables linting Angular Templates

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions