angular / angular/angular

Whitespaces are not trimmed in Text Node with `preserveWhitespaces: false`

Open
#37,635 8 comments 5 reactions 0 assignees View on GitHub
area: compiler area: core core: basic template syntax P3 type: use-case
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

# 🐞 bug report

### Affected Package

The issue is caused by package `@angular/compiler`

### Is this a regression?

Yes, the previous version in which this bug was not present was: ....

No idea

### Description

A clear and concise description of the problem...

https://github.com/angular/angular/blob/d1ea1f4c7f3358b730b0d94e65b00bc28cae279c/packages/compiler/src/ml_parser/html_whitespaces.ts#L78

```html


{{ 'text' }}

{{ 'text' }}

{{ 'text' }}
```

There is no way to `trim` the text.

## 🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-pkkssb

## 🌍 Your Environment

**Angular Version:**

Angular CLI: 9.1.1
Node: 12.18.0
OS: darwin x64

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

Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.901.1
@angular-devkit/build-angular 0.901.1
@angular-devkit/build-optimizer 0.901.1
@angular-devkit/build-webpack 0.901.1
@angular-devkit/core 9.1.1
@angular-devkit/schematics 9.1.1
@angular/cdk 9.2.1
@angular/cli 9.1.1
@angular/flex-layout 9.0.0-beta.29
@ngtools/webpack 9.1.1
@schematics/angular 9.1.1
@schematics/update 0.901.1
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0

**Anything else relevant?**

Contributor guide

Open the contributing guide

Research direction

Start with packages/compiler/src/ml_parser/html_whitespaces.ts at the referenced line and reproduce the behavior using the linked StackBlitz example. Trace how whitespace is handled for text nodes when preserveWhitespaces is false, then verify that the sample input produces the expected span without surrounding spaces.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
compilers, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.