Vscode-ng-language-service: Syntax highlighting breaks when escaping curly braces with backslash in .html template file.

[MoazAlkharfan]

Describe the bug
Title says it all.

To Reproduce

Steps to reproduce the behavior:

1. Create empty project ng new test-app
2. Open file test-proj/src/app/app.component.html
3. Escape curly braces in html component.

<button type="button" (click)="TestMethod('{{text}\}')">Add text field</button>
<button type="button" (click)="TestMethod('{{text_2}\}')">Add text_2 field</button>

4. Watch broken syntax highlighting. **Expected behavior** Fully working Syntax hightlighting. **Logs** Please attach two logs: 1. Console output (Go to toolbar --> View --> Output, and copy the contents)

[Info  - 2:26:55 PM] Angular language server process ID: 22612
[Info  - 2:26:55 PM] Using typescript/lib/tsserverlibrary v4.0.5 from c:\Users\redacted\.vscode\extensions\angular.ng-template-0.1100.1\node_modules\typescript\lib\tsserverlibrary.js
[Info  - 2:26:55 PM] Using @angular/language-service v11.0.1 from c:\Users\redacted\.vscode\extensions\angular.ng-template-0.1100.1\server\node_modules\@angular\language-service\bundles\language-service.js
[Info  - 2:26:55 PM] Log file: c:\Users\redacted\AppData\Roaming\Code\logs\20201127T142648\exthost1\Angular.ng-template\nglangsvc.log
[Info  - 2:26:58 PM] Enabling VE language service for c:/Users/redacted/Documents/test-proj/tsconfig.json.

2. Log file (Path is printed to the console output at startup)

Info 0    [14:26:55.743] Format host information updated
Info 1    [14:26:55.744] reload projects.
Info 2    [14:26:55.744] Before ensureProjectForOpenFiles:
Info 3    [14:26:55.744] After ensureProjectForOpenFiles:
Info 4    [14:26:55.744] Host file extension mappings updated
Info 5    [14:26:55.744] Angular language server process ID: 22612
Info 6    [14:26:55.745] Using typescript/lib/tsserverlibrary v4.0.5 from c:\Users\redacted\.vscode\extensions\angular.ng-template-0.1100.1\node_modules\typescript\lib\tsserverlibrary.js
Info 7    [14:26:55.745] Using @angular/language-service v11.0.1 from c:\Users\redacted\.vscode\extensions\angular.ng-template-0.1100.1\server\node_modules\@angular\language-service\bundles\language-service.js
Info 8    [14:26:55.745] Log file: c:\Users\redacted\AppData\Roaming\Code\logs\20201127T142648\exthost1\Angular.ng-template\nglangsvc.log
Info 9    [14:26:55.749] Search path: c:/Users/redacted/Documents/test-proj/src/app
Info 10   [14:26:55.750] For info: c:/Users/redacted/Documents/test-proj/src/app/app.component.html :: Config file name: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 11   [14:26:55.750] Opened configuration file c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 12   [14:26:55.753] Loading new project: Creating possible configured project for c:/Users/redacted/Documents/test-proj/src/app/app.component.html to open
Info 13   [14:26:55.773] Config: c:/Users/redacted/Documents/test-proj/tsconfig.json : {
 "rootNames": [
  "c:/Users/redacted/Documents/test-proj/e2e/src/app.e2e-spec.ts",
  "c:/Users/redacted/Documents/test-proj/e2e/src/app.po.ts",
  "c:/Users/redacted/Documents/test-proj/src/main.ts",
  "c:/Users/redacted/Documents/test-proj/src/polyfills.ts",
  "c:/Users/redacted/Documents/test-proj/src/test.ts",
  "c:/Users/redacted/Documents/test-proj/src/app/app.component.spec.ts",
  "c:/Users/redacted/Documents/test-proj/src/app/app.component.ts",
  "c:/Users/redacted/Documents/test-proj/src/app/app.module.ts",
  "c:/Users/redacted/Documents/test-proj/src/environments/environment.prod.ts",
  "c:/Users/redacted/Documents/test-proj/src/environments/environment.ts"
 ],
 "options": {
  "baseUrl": "c:/Users/redacted/Documents/test-proj",
  "outDir": "c:/Users/redacted/Documents/test-proj/dist/out-tsc",
  "sourceMap": true,
  "declaration": false,
  "downlevelIteration": true,
  "experimentalDecorators": true,
  "module": 99,
  "moduleResolution": 2,
  "importHelpers": true,
  "target": 2,
  "typeRoots": [
   "c:/Users/redacted/Documents/test-proj/node_modules/@types"
  ],
  "lib": [
   "lib.es2018.d.ts",
   "lib.dom.d.ts"
  ],
  "configFilePath": "c:/Users/redacted/Documents/test-proj/tsconfig.json"
 }
}
Info 14   [14:26:55.775] Loading global plugin @angular/language-service
Info 15   [14:26:55.775] Enabling plugin @angular/language-service from candidate paths: c:\Users\redacted\.vscode\extensions\angular.ng-template-0.1100.1\server\node_modules\@angular\language-service\bundles\language-service.js,c:/Users/redacted/.vscode/extensions/angular.ng-template-0.1100.1/node_modules/typescript/lib/tsserverlibrary.js/../../..
Info 16   [14:26:55.775] Loading @angular/language-service from c:\Users\redacted\.vscode\extensions\angular.ng-template-0.1100.1\server\node_modules\@angular\language-service\bundles\language-service.js (resolved to c:/Users/redacted/.vscode/extensions/angular.ng-template-0.1100.1/server/node_modules/@angular/language-service/bundles/language-service.js/node_modules)
Info 17   [14:26:55.816] Plugin validation succeded
Info 18   [14:26:55.844] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 19   [14:26:58.0] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 1 structureChanged: true Elapsed: 2156ms
Info 20   [14:26:58.0] Project 'c:/Users/redacted/Documents/test-proj/tsconfig.json' (Configured)
Info 21   [14:26:58.0]  Files (249)

Info 22   [14:26:58.0] -----------------------------------------------
Info 23   [14:26:58.29] Starting updateGraphWorker: Project: /dev/null/autoImportProviderProject1*
Info 24   [14:26:58.267] Finishing updateGraphWorker: Project: /dev/null/autoImportProviderProject1* Version: 1 structureChanged: true Elapsed: 238ms
Info 25   [14:26:58.267] Project '/dev/null/autoImportProviderProject1*' (AutoImportProvider)
Info 26   [14:26:58.267]    Files (68)

Info 27   [14:26:58.267] -----------------------------------------------
Info 28   [14:26:58.268] Enabling VE language service for c:/Users/redacted/Documents/test-proj/tsconfig.json.
Info 29   [14:27:3.54] Search path: c:/Users/redacted/Documents/test-proj/src/app
Info 30   [14:27:3.54] For info: c:/Users/redacted/Documents/test-proj/src/app/app.component.ts :: Config file name: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 31   [14:27:5.160] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 32   [14:27:5.180] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 2 structureChanged: false Elapsed: 20ms
Info 33   [14:27:5.180] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 34   [14:27:6.301] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 35   [14:27:6.303] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 3 structureChanged: false Elapsed: 2ms
Info 36   [14:27:10.727] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 37   [14:27:10.729] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 4 structureChanged: false Elapsed: 2ms
Info 38   [14:27:11.223] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 39   [14:27:11.225] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 5 structureChanged: false Elapsed: 2ms
Info 40   [14:27:11.404] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 41   [14:27:11.406] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 6 structureChanged: false Elapsed: 2ms
Info 42   [14:27:11.699] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 43   [14:27:11.701] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 7 structureChanged: false Elapsed: 2ms
Info 44   [14:27:11.911] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 45   [14:27:11.913] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 8 structureChanged: false Elapsed: 2ms
Info 46   [14:27:12.5] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 47   [14:27:12.7] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 9 structureChanged: false Elapsed: 2ms
Info 48   [14:27:14.322] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 49   [14:27:14.324] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 10 structureChanged: false Elapsed: 2ms
Info 50   [14:27:14.918] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 51   [14:27:14.920] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 11 structureChanged: false Elapsed: 2ms
Info 52   [14:27:15.57] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 53   [14:27:15.59] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 12 structureChanged: false Elapsed: 2ms
Info 54   [14:27:15.284] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 55   [14:27:15.286] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 13 structureChanged: false Elapsed: 1ms
Info 56   [14:27:15.346] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 57   [14:27:15.348] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 14 structureChanged: false Elapsed: 2ms
Info 58   [14:27:15.409] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 59   [14:27:15.410] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 15 structureChanged: false Elapsed: 1ms
Info 60   [14:27:15.509] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 61   [14:27:15.510] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 16 structureChanged: false Elapsed: 1ms
Info 62   [14:27:17.699] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 63   [14:27:17.702] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 17 structureChanged: false Elapsed: 3ms
Info 64   [14:27:22.16] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 65   [14:27:22.18] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 18 structureChanged: false Elapsed: 2ms
Info 66   [14:27:22.420] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 67   [14:27:22.422] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 19 structureChanged: false Elapsed: 2ms
Info 68   [14:27:24.608] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 69   [14:27:24.609] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 20 structureChanged: false Elapsed: 1ms
Info 70   [14:27:26.458] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 71   [14:27:26.460] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 21 structureChanged: false Elapsed: 1ms
Info 72   [14:28:51.492] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 73   [14:28:51.501] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 22 structureChanged: false Elapsed: 9ms
Info 74   [14:28:51.518] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 75   [14:28:51.520] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 23 structureChanged: false Elapsed: 2ms
Info 76   [14:28:52.120] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 77   [14:28:52.122] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 24 structureChanged: false Elapsed: 2ms
Info 78   [14:28:53.366] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 79   [14:28:53.367] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 25 structureChanged: false Elapsed: 1ms
Info 80   [14:28:53.425] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 81   [14:28:53.429] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 26 structureChanged: false Elapsed: 4ms
Info 82   [14:28:53.962] Starting updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json
Info 83   [14:28:53.964] Finishing updateGraphWorker: Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Version: 27 structureChanged: false Elapsed: 2ms
Info 84   [14:29:52.577] DirectoryWatcher:: Triggered with c:/users/redacted/documents/test-proj/.git/objects/maintenance.lock :: WatchInfo: c:/users/redacted/documents/test-proj 1 undefined Project: c:/Users/redacted/Documents/test-proj/tsconfig.json WatchType: Wild card directory
Info 85   [14:29:52.577] Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Detected ignored path: c:/users/redacted/documents/test-proj/.git/objects/maintenance.lock
Info 86   [14:29:52.577] Elapsed:: 0ms DirectoryWatcher:: Triggered with c:/users/redacted/documents/test-proj/.git/objects/maintenance.lock :: WatchInfo: c:/users/redacted/documents/test-proj 1 undefined Project: c:/Users/redacted/Documents/test-proj/tsconfig.json WatchType: Wild card directory
Info 87   [14:29:52.577] DirectoryWatcher:: Triggered with c:/users/redacted/documents/test-proj/.git/objects/maintenance.lock :: WatchInfo: c:/users/redacted/documents/test-proj 1 undefined Project: c:/Users/redacted/Documents/test-proj/tsconfig.json WatchType: Wild card directory
Info 88   [14:29:52.578] Project: c:/Users/redacted/Documents/test-proj/tsconfig.json Detected ignored path: c:/users/redacted/documents/test-proj/.git/objects/maintenance.lock
Info 89   [14:29:52.578] Elapsed:: 1ms DirectoryWatcher:: Triggered with c:/users/redacted/documents/test-proj/.git/objects/maintenance.lock :: WatchInfo: c:/users/redacted/documents/test-proj 1 undefined Project: c:/Users/redacted/Documents/test-proj/tsconfig.json WatchType: Wild card directory

Screenshots

Additional context

Add any other context about the problem here.

[ayazhafiz]

Hi, thanks for the report. Escaping interpolation tags in this way is not recommended as it gets around how interpolations are parsed in the framework, and doing so will soon be an error. The recommended way to escape interpolations as text in your example would be as AddTextToActiveInput('{{ "{{" }}text{{ "}}" }}'). For this reason, I do not think we will fix the syntax highlighting issue in this case.

[ayazhafiz]

Closing as no-fix.

[angular-automatic-lock-bot[bot]]

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._}