feat(server): provide folding ranges for inline templates

BUILD.bazel

@@ -54,6 +54,7 @@ npm_package(
         ":node_modules/semver",
         ":node_modules/typescript",
         ":node_modules/vscode-jsonrpc",
+        ":node_modules/vscode-html-languageservice",
         ":node_modules/vscode-languageclient",
         ":node_modules/vscode-languageserver-protocol",
         ":node_modules/vscode-languageserver-types",

client/src/client.ts

@@ -151,7 +151,15 @@ export class AngularLanguageClient implements vscode.Disposable {
           }
 
           return angularCompletionsPromise;
-        }
+        },
+        provideFoldingRanges: async (
+            document: vscode.TextDocument, context: vscode.FoldingContext,
+            token: vscode.CancellationToken, next) => {
+          if (!(await this.isInAngularProject(document)) || document.languageId !== 'typescript') {
+            return null;
+          }
+          return next(document, context, token);
+        },
       }
     };
   }

integration/lsp/ivy_spec.ts

@@ -181,6 +181,38 @@ describe('Angular Ivy language server', () => {
     expect(targetUri).toContain('libs/post/src/lib/post.component.ts');
   });
 
+  it('provides folding ranges for inline templates', async () => {
+    openTextDocument(client, APP_COMPONENT, `
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: \`
+  <div>
+    <span>
+      Hello {{name}}
+    </span>
+  </div>\`,
+})
+export class AppComponent {
+  name = 'Angular';
+  @Input() appInput = '';
+  @Output() appOutput = new EventEmitter<string>();
+}`);
+    const languageServiceEnabled = await waitForNgcc(client);
+    expect(languageServiceEnabled).toBeTrue();
+    const response = await client.sendRequest(lsp.FoldingRangeRequest.type, {
+      textDocument: {
+        uri: APP_COMPONENT_URI,
+      },
+    }) as lsp.FoldingRange[];
+    expect(Array.isArray(response)).toBe(true);
+    // 1 folding range for the div, 1 for the span
+    expect(response.length).toEqual(2);
+    expect(response).toContain({startLine: 6, endLine: 9});
+    expect(response).toContain({startLine: 7, endLine: 8});
+  });
+
   describe('signature help', () => {
     it('should show signature help for an empty call', async () => {
       client.sendNotification(lsp.DidOpenTextDocumentNotification.type, {

package.json

@@ -201,7 +201,7 @@
   "main": "./dist/client/src/extension",
   "scripts": {
     "ng-dev": "cross-env TS_NODE_PROJECT=$PWD/.ng-dev/tsconfig.json TS_NODE_TRANSPILE_ONLY=1 node --no-warnings --loader ts-node/esm node_modules/@angular/dev-infra-private/ng-dev/bundles/cli.mjs",
-    "compile": "tsc -b && node esbuild.js",
+    "compile": "tsc -b && yarn bazel build :npm",
     "compile:test": "tsc -b test.tsconfig.json",
     "compile:integration": "tsc -b integration && yarn --cwd integration/project build",
     "compile:syntaxes-test": "tsc -b syntaxes/test",
@@ -248,6 +248,7 @@
     "tslint": "6.1.3",
     "tslint-eslint-rules": "5.4.0",
     "vsce": "1.100.1",
+    "vscode-html-languageservice": "^5.0.2",
     "vscode-languageserver-protocol": "3.16.0",
     "vscode-languageserver-textdocument": "1.0.7",
     "vscode-test": "1.6.1",
@@ -257,4 +258,4 @@
     "type": "git",
     "url": "https://github.com/angular/vscode-ng-language-service"
   }
-}
+}

server/BUILD.bazel

@@ -53,6 +53,8 @@ esbuild(
         "vscode-languageserver",
         "vscode-uri",
         "vscode-jsonrpc",
+        "vscode-languageserver-textdocument",
+        "vscode-html-languageservice",
     ],
     config = "esbuild.mjs",
     # Do not enable minification. It seems to break the extension on Windows (with WSL). See #1198.

server/package.json

@@ -16,11 +16,13 @@
   },
   "dependencies": {
     "@angular/language-service": "15.0.0-next.0",
+    "vscode-html-languageservice": "^5.0.2",
     "vscode-jsonrpc": "6.0.0",
     "vscode-languageserver": "7.0.0",
+    "vscode-languageserver-textdocument": "^1.0.7",
     "vscode-uri": "3.0.3"
   },
   "publishConfig": {
     "registry": "https://wombat-dressing-room.appspot.com"
   }
-}
+}

server/src/BUILD.bazel

@@ -11,7 +11,9 @@ ts_project(
         "//:node_modules/@angular/language-service",
         "//:node_modules/@types/node",
         "//:node_modules/typescript",
+        "//:node_modules/vscode-html-languageservice",
         "//:node_modules/vscode-languageserver",
+        "//:node_modules/vscode-languageserver-textdocument",
         "//:node_modules/vscode-uri",
         "//common",
     ],

server/src/banner.ts

@@ -18,9 +18,9 @@ const originalRequire = require;
  * compile the server and add this banner to the top of the compilation so any place
  * in the server code that uses `require` will get routed through this override.
  *
- * Refer also to `esbuild.js`, the `bannerConfig` which overrides the `require` using
- * the `footer` option, and the `serverConfig` which provides the banner code at the top
- * of the server output using the `banner` option.
+ * Refer also to `esbuild` rules in the server package, the `bannerConfig` which overrides the
+ * `require` using the `footer` option, and the `serverConfig` which provides the banner code at the
+ * top of the server output using the `banner` option.
  *
  * @param moduleName The module to resolve
  * @returns