@angular/language-service 11.2.8 → 11.2.9

package/bundles/ivy.js

@@ -1,5 +1,5 @@
 /**
- * @license Angular v11.2.8
+ * @license Angular v11.2.9
  * Copyright Google LLC All Rights Reserved.
  * License: MIT
  */
@@ -20399,7 +20399,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
      * Use of this source code is governed by an MIT-style license that can be
      * found in the LICENSE file at https://angular.io/license
      */
-    const VERSION$1 = new Version('11.2.8');
+    const VERSION$1 = new Version('11.2.9');
 
     /**
      * @license
@@ -21056,7 +21056,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
      */
     function createDirectiveDefinitionMap(meta) {
         const definitionMap = new DefinitionMap();
-        definitionMap.set('version', literal('11.2.8'));
+        definitionMap.set('version', literal('11.2.9'));
         // e.g. `type: MyDirective`
         definitionMap.set('type', meta.internalType);
         // e.g. `selector: 'some-dir'`
@@ -21277,7 +21277,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
      */
     function createPipeDefinitionMap(meta) {
         const definitionMap = new DefinitionMap();
-        definitionMap.set('version', literal('11.2.8'));
+        definitionMap.set('version', literal('11.2.9'));
         definitionMap.set('ngImport', importExpr(Identifiers$1.core));
         // e.g. `type: MyPipe`
         definitionMap.set('type', meta.internalType);
@@ -21309,7 +21309,7 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
      * Use of this source code is governed by an MIT-style license that can be
      * found in the LICENSE file at https://angular.io/license
      */
-    const VERSION$2 = new Version('11.2.8');
+    const VERSION$2 = new Version('11.2.9');
 
     /**
      * @license
@@ -25632,10 +25632,38 @@ define(['exports', 'typescript/lib/tsserverlibrary', 'os', 'typescript', 'fs', '
          * operation.
          */
         PerfPhase[PerfPhase["LsReferencesAndRenames"] = 16] = "LsReferencesAndRenames";
+        /**
+         * Time spent by the Angular Language Service calculating a "quick info" operation.
+         */
+        PerfPhase[PerfPhase["LsQuickInfo"] = 17] = "LsQuickInfo";
+        /**
+         * Time spent by the Angular Language Service calculating a "get type definition" or "get
+         * definition" operation.
+         */
+        PerfPhase[PerfPhase["LsDefinition"] = 18] = "LsDefinition";
+        /**
+         * Time spent by the Angular Language Service calculating a "get completions" (AKA autocomplete)
+         * operation.
+         */
+        PerfPhase[PerfPhase["LsCompletions"] = 19] = "LsCompletions";
+        /**
+         * Time spent by the Angular Language Service calculating a "view template typecheck block"
+         * operation.
+         */
+        PerfPhase[PerfPhase["LsTcb"] = 20] = "LsTcb";
+        /**
+         * Time spent by the Angular Language Service calculating diagnostics.
+         */
+        PerfPhase[PerfPhase["LsDiagnostics"] = 21] = "LsDiagnostics";
+        /**
+         * Time spent by the Angular Language Service calculating a "get component locations for template"
+         * operation.
+         */
+        PerfPhase[PerfPhase["LsComponentLocations"] = 22] = "LsComponentLocations";
         /**
          * Tracks the number of `PerfPhase`s, and must appear at the end of the list.
          */
-        PerfPhase[PerfPhase["LAST"] = 17] = "LAST";
+        PerfPhase[PerfPhase["LAST"] = 23] = "LAST";
     })(PerfPhase || (PerfPhase = {}));
     /**
      * Represents some occurrence during compilation, and is tracked with a counter.
@@ -30267,9 +30295,16 @@ Either add the @Injectable() decorator to '${provider.node.name
             const meta = this._resolveLiteral(decorator);
             const component = reflectObjectLiteral(meta);
             const containingFile = node.getSourceFile().fileName;
-            const resolveStyleUrl = (styleUrl, nodeForError, resourceType) => {
-                const resourceUrl = this._resolveResourceOrThrow(styleUrl, containingFile, nodeForError, resourceType);
-                return this.resourceLoader.preload(resourceUrl);
+            const resolveStyleUrl = (styleUrl) => {
+                try {
+                    const resourceUrl = this.resourceLoader.resolve(styleUrl, containingFile);
+                    return this.resourceLoader.preload(resourceUrl);
+                }
+                catch (_a) {
+                    // Don't worry about failures to preload. We can handle this problem during analysis by
+                    // producing a diagnostic.
+                    return undefined;
+                }
             };
             // A Promise that waits for the template and all <link>ed styles within it to be preloaded.
             const templateAndTemplateStyleResources = this._preloadAndParseTemplate(node, decorator, component, containingFile)
@@ -30277,9 +30312,7 @@ Either add the @Injectable() decorator to '${provider.node.name
                 if (template === null) {
                     return undefined;
                 }
-                const nodeForError = getTemplateDeclarationNodeForError(template.declaration);
-                return Promise
-                    .all(template.styleUrls.map(styleUrl => resolveStyleUrl(styleUrl, nodeForError, 1 /* StylesheetFromTemplate */)))
+                return Promise.all(template.styleUrls.map(styleUrl => resolveStyleUrl(styleUrl)))
                     .then(() => undefined);
             });
             // Extract all the styleUrls in the decorator.
@@ -30294,7 +30327,7 @@ Either add the @Injectable() decorator to '${provider.node.name
                 return Promise
                     .all([
                     templateAndTemplateStyleResources,
-                    ...componentStyleUrls.map(styleUrl => resolveStyleUrl(styleUrl.url, styleUrl.nodeForError, 2 /* StylesheetFromDecorator */))
+                    ...componentStyleUrls.map(styleUrl => resolveStyleUrl(styleUrl.url))
                 ])
                     .then(() => undefined);
             }
@@ -30304,6 +30337,8 @@ Either add the @Injectable() decorator to '${provider.node.name
             this.perf.eventCount(PerfEvent.AnalyzeComponent);
             const containingFile = node.getSourceFile().fileName;
             this.literalCache.delete(decorator);
+            let diagnostics;
+            let isPoisoned = false;
             // @Component inherits @Directive, so begin by extracting the @Directive metadata and building
             // on it.
             const directiveResult = extractDirectiveMetadata(node, decorator, this.reflector, this.evaluator, this.defaultImportRecorder, this.isCore, flags, this.annotateForClosureCompiler, this.elementSchemaRegistry.getDefaultComponentElementName());
@@ -30371,14 +30406,23 @@ Either add the @Injectable() decorator to '${provider.node.name
                 ...this._extractComponentStyleUrls(component), ...this._extractTemplateStyleUrls(template)
             ];
             for (const styleUrl of styleUrls) {
-                const resourceType = styleUrl.source === 2 /* StylesheetFromDecorator */ ?
-                    2 /* StylesheetFromDecorator */ :
-                    1 /* StylesheetFromTemplate */;
-                const resourceUrl = this._resolveResourceOrThrow(styleUrl.url, containingFile, styleUrl.nodeForError, resourceType);
-                const resourceStr = this.resourceLoader.load(resourceUrl);
-                styles.push(resourceStr);
-                if (this.depTracker !== null) {
-                    this.depTracker.addResourceDependency(node.getSourceFile(), absoluteFrom(resourceUrl));
+                try {
+                    const resourceUrl = this.resourceLoader.resolve(styleUrl.url, containingFile);
+                    const resourceStr = this.resourceLoader.load(resourceUrl);
+                    styles.push(resourceStr);
+                    if (this.depTracker !== null) {
+                        this.depTracker.addResourceDependency(node.getSourceFile(), absoluteFrom(resourceUrl));
+                    }
+                }
+                catch (_b) {
+                    if (diagnostics === undefined) {
+                        diagnostics = [];
+                    }
+                    const resourceType = styleUrl.source === 2 /* StylesheetFromDecorator */ ?
+                        2 /* StylesheetFromDecorator */ :
+                        1 /* StylesheetFromTemplate */;
+                    diagnostics.push(this.makeResourceNotFoundError(styleUrl.url, styleUrl.nodeForError, resourceType)
+                        .toDiagnostic());
                 }
             }
             let inlineStyles = null;
@@ -30421,8 +30465,9 @@ Either add the @Injectable() decorator to '${provider.node.name
                         styles: styleResources,
                         template: templateResource,
                     },
-                    isPoisoned: false,
+                    isPoisoned,
                 },
+                diagnostics,
             };
             if (changeDetection !== null) {
                 output.analysis.meta.changeDetection = changeDetection;
@@ -30651,12 +30696,15 @@ Either add the @Injectable() decorator to '${provider.node.name
             let styles = [];
             if (analysis.styleUrls !== null) {
                 for (const styleUrl of analysis.styleUrls) {
-                    const resourceType = styleUrl.source === 2 /* StylesheetFromDecorator */ ?
-                        2 /* StylesheetFromDecorator */ :
-                        1 /* StylesheetFromTemplate */;
-                    const resolvedStyleUrl = this._resolveResourceOrThrow(styleUrl.url, containingFile, styleUrl.nodeForError, resourceType);
-                    const styleText = this.resourceLoader.load(resolvedStyleUrl);
-                    styles.push(styleText);
+                    try {
+                        const resolvedStyleUrl = this.resourceLoader.resolve(styleUrl.url, containingFile);
+                        const styleText = this.resourceLoader.load(resolvedStyleUrl);
+                        styles.push(styleText);
+                    }
+                    catch (e) {
+                        // Resource resolve failures should already be in the diagnostics list from the analyze
+                        // stage. We do not need to do anything with them when updating resources.
+                    }
                 }
             }
             if (analysis.inlineStyles !== null) {
@@ -30778,8 +30826,15 @@ Either add the @Injectable() decorator to '${provider.node.name
             const styleUrlsExpr = component.get('styleUrls');
             if (styleUrlsExpr !== undefined && ts$1.isArrayLiteralExpression(styleUrlsExpr)) {
                 for (const expression of stringLiteralElements(styleUrlsExpr)) {
-                    const resourceUrl = this._resolveResourceOrThrow(expression.text, containingFile, expression, 2 /* StylesheetFromDecorator */);
-                    styles.add({ path: absoluteFrom(resourceUrl), expression });
+                    try {
+                        const resourceUrl = this.resourceLoader.resolve(expression.text, containingFile);
+                        styles.add({ path: absoluteFrom(resourceUrl), expression });
+                    }
+                    catch (_a) {
+                        // Errors in style resource extraction do not need to be handled here. We will produce
+                        // diagnostics for each one that fails in the analysis, after we evaluate the `styleUrls`
+                        // expression to determine _all_ style resources, not just the string literals.
+                    }
                 }
             }
             const stylesExpr = component.get('styles');
@@ -30798,20 +30853,25 @@ Either add the @Injectable() decorator to '${provider.node.name
                 if (typeof templateUrl !== 'string') {
                     throw createValueHasWrongTypeError(templateUrlExpr, templateUrl, 'templateUrl must be a string');
                 }
-                const resourceUrl = this._resolveResourceOrThrow(templateUrl, containingFile, templateUrlExpr, 0 /* Template */);
-                const templatePromise = this.resourceLoader.preload(resourceUrl);
-                // If the preload worked, then actually load and parse the template, and wait for any style
-                // URLs to resolve.
-                if (templatePromise !== undefined) {
-                    return templatePromise.then(() => {
-                        const templateDecl = this.parseTemplateDeclaration(decorator, component, containingFile);
-                        const template = this.extractTemplate(node, templateDecl);
-                        this.preanalyzeTemplateCache.set(node, template);
-                        return template;
-                    });
+                try {
+                    const resourceUrl = this.resourceLoader.resolve(templateUrl, containingFile);
+                    const templatePromise = this.resourceLoader.preload(resourceUrl);
+                    // If the preload worked, then actually load and parse the template, and wait for any style
+                    // URLs to resolve.
+                    if (templatePromise !== undefined) {
+                        return templatePromise.then(() => {
+                            const templateDecl = this.parseTemplateDeclaration(decorator, component, containingFile);
+                            const template = this.extractTemplate(node, templateDecl);
+                            this.preanalyzeTemplateCache.set(node, template);
+                            return template;
+                        });
+                    }
+                    else {
+                        return Promise.resolve(null);
+                    }
                 }
-                else {
-                    return Promise.resolve(null);
+                catch (e) {
+                    throw this.makeResourceNotFoundError(templateUrl, templateUrlExpr, 0 /* Template */);
                 }
             }
             else {
@@ -30943,16 +31003,21 @@ Either add the @Injectable() decorator to '${provider.node.name
                 if (typeof templateUrl !== 'string') {
                     throw createValueHasWrongTypeError(templateUrlExpr, templateUrl, 'templateUrl must be a string');
                 }
-                const resourceUrl = this._resolveResourceOrThrow(templateUrl, containingFile, templateUrlExpr, 0 /* Template */);
-                return {
-                    isInline: false,
-                    interpolationConfig,
-                    preserveWhitespaces,
-                    templateUrl,
-                    templateUrlExpression: templateUrlExpr,
-                    resolvedTemplateUrl: resourceUrl,
-                    sourceMapUrl: sourceMapUrl(resourceUrl),
-                };
+                try {
+                    const resourceUrl = this.resourceLoader.resolve(templateUrl, containingFile);
+                    return {
+                        isInline: false,
+                        interpolationConfig,
+                        preserveWhitespaces,
+                        templateUrl,
+                        templateUrlExpression: templateUrlExpr,
+                        resolvedTemplateUrl: resourceUrl,
+                        sourceMapUrl: sourceMapUrl(resourceUrl),
+                    };
+                }
+                catch (e) {
+                    throw this.makeResourceNotFoundError(templateUrl, templateUrlExpr, 0 /* Template */);
+                }
             }
             else if (component.has('template')) {
                 return {
@@ -31005,30 +31070,20 @@ Either add the @Injectable() decorator to '${provider.node.name
             }
             this.cycleAnalyzer.recordSyntheticImport(origin, imported);
         }
-        /**
-         * Resolve the url of a resource relative to the file that contains the reference to it.
-         *
-         * Throws a FatalDiagnosticError when unable to resolve the file.
-         */
-        _resolveResourceOrThrow(file, basePath, nodeForError, resourceType) {
-            try {
-                return this.resourceLoader.resolve(file, basePath);
-            }
-            catch (e) {
-                let errorText;
-                switch (resourceType) {
-                    case 0 /* Template */:
-                        errorText = `Could not find template file '${file}'.`;
-                        break;
-                    case 1 /* StylesheetFromTemplate */:
-                        errorText = `Could not find stylesheet file '${file}' linked from the template.`;
-                        break;
-                    case 2 /* StylesheetFromDecorator */:
-                        errorText = `Could not find stylesheet file '${file}'.`;
-                        break;
-                }
-                throw new FatalDiagnosticError(ErrorCode.COMPONENT_RESOURCE_NOT_FOUND, nodeForError, errorText);
+        makeResourceNotFoundError(file, nodeForError, resourceType) {
+            let errorText;
+            switch (resourceType) {
+                case 0 /* Template */:
+                    errorText = `Could not find template file '${file}'.`;
+                    break;
+                case 1 /* StylesheetFromTemplate */:
+                    errorText = `Could not find stylesheet file '${file}' linked from the template.`;
+                    break;
+                case 2 /* StylesheetFromDecorator */:
+                    errorText = `Could not find stylesheet file '${file}'.`;
+                    break;
             }
+            return new FatalDiagnosticError(ErrorCode.COMPONENT_RESOURCE_NOT_FOUND, nodeForError, errorText);
         }
         _extractTemplateStyleUrls(template) {
             if (template.styleUrls === null) {
@@ -40590,24 +40645,30 @@ https://v9.angular.io/guide/template-typecheck#template-type-checking`,
         };
     }
     function getExtendedConfigPath(configFile, extendsValue, host, fs) {
-        let extendedConfigPath = null;
+        const result = getExtendedConfigPathWorker(configFile, extendsValue, host, fs);
+        if (result !== null) {
+            return result;
+        }
+        // Try to resolve the paths with a json extension append a json extension to the file in case if
+        // it is missing and the resolution failed. This is to replicate TypeScript behaviour, see:
+        // https://github.com/microsoft/TypeScript/blob/294a5a7d784a5a95a8048ee990400979a6bc3a1c/src/compiler/commandLineParser.ts#L2806
+        return getExtendedConfigPathWorker(configFile, `${extendsValue}.json`, host, fs);
+    }
+    function getExtendedConfigPathWorker(configFile, extendsValue, host, fs) {
         if (extendsValue.startsWith('.') || fs.isRooted(extendsValue)) {
-            extendedConfigPath = host.resolve(host.dirname(configFile), extendsValue);
-            extendedConfigPath = host.extname(extendedConfigPath) ?
-                extendedConfigPath :
-                absoluteFrom(`${extendedConfigPath}.json`);
+            const extendedConfigPath = host.resolve(host.dirname(configFile), extendsValue);
+            if (host.exists(extendedConfigPath)) {
+                return extendedConfigPath;
+            }
         }
         else {
             const parseConfigHost = createParseConfigHost(host, fs);
             // Path isn't a rooted or relative path, resolve like a module.
             const { resolvedModule, } = ts$1.nodeModuleNameResolver(extendsValue, configFile, { moduleResolution: ts$1.ModuleResolutionKind.NodeJs, resolveJsonModule: true }, parseConfigHost);
             if (resolvedModule) {
-                extendedConfigPath = absoluteFrom(resolvedModule.resolvedFileName);
+                return absoluteFrom(resolvedModule.resolvedFileName);
             }
         }
-        if (extendedConfigPath !== null && host.exists(extendedConfigPath)) {
-            return extendedConfigPath;
-        }
         return null;
     }
 
@@ -43501,49 +43562,52 @@ https://v9.angular.io/guide/template-typecheck#template-type-checking`,
             return this.options;
         }
         getSemanticDiagnostics(fileName) {
-            const compiler = this.compilerFactory.getOrCreate();
-            const ttc = compiler.getTemplateTypeChecker();
-            const diagnostics = [];
-            if (isTypeScriptFile(fileName)) {
-                const program = compiler.getNextProgram();
-                const sourceFile = program.getSourceFile(fileName);
-                if (sourceFile) {
-                    const ngDiagnostics = compiler.getDiagnosticsForFile(sourceFile, OptimizeFor.SingleFile);
-                    // There are several kinds of diagnostics returned by `NgCompiler` for a source file:
-                    //
-                    // 1. Angular-related non-template diagnostics from decorated classes within that file.
-                    // 2. Template diagnostics for components with direct inline templates (a string literal).
-                    // 3. Template diagnostics for components with indirect inline templates (templates computed
-                    //    by expression).
-                    // 4. Template diagnostics for components with external templates.
-                    //
-                    // When showing diagnostics for a TS source file, we want to only include kinds 1 and 2 -
-                    // those diagnostics which are reported at a location within the TS file itself. Diagnostics
-                    // for external templates will be shown when editing that template file (the `else` block)
-                    // below.
-                    //
-                    // Currently, indirect inline template diagnostics (kind 3) are not shown at all by the
-                    // Language Service, because there is no sensible location in the user's code for them. Such
-                    // templates are an edge case, though, and should not be common.
-                    //
-                    // TODO(alxhub): figure out a good user experience for indirect template diagnostics and
-                    // show them from within the Language Service.
-                    diagnostics.push(...ngDiagnostics.filter(diag => diag.file !== undefined && diag.file.fileName === sourceFile.fileName));
+            return this.withCompilerAndPerfTracing(PerfPhase.LsDiagnostics, (compiler) => {
+                const ttc = compiler.getTemplateTypeChecker();
+                const diagnostics = [];
+                if (isTypeScriptFile(fileName)) {
+                    const program = compiler.getNextProgram();
+                    const sourceFile = program.getSourceFile(fileName);
+                    if (sourceFile) {
+                        const ngDiagnostics = compiler.getDiagnosticsForFile(sourceFile, OptimizeFor.SingleFile);
+                        // There are several kinds of diagnostics returned by `NgCompiler` for a source file:
+                        //
+                        // 1. Angular-related non-template diagnostics from decorated classes within that
+                        // file.
+                        // 2. Template diagnostics for components with direct inline templates (a string
+                        // literal).
+                        // 3. Template diagnostics for components with indirect inline templates (templates
+                        // computed
+                        //    by expression).
+                        // 4. Template diagnostics for components with external templates.
+                        //
+                        // When showing diagnostics for a TS source file, we want to only include kinds 1 and
+                        // 2 - those diagnostics which are reported at a location within the TS file itself.
+                        // Diagnostics for external templates will be shown when editing that template file
+                        // (the `else` block) below.
+                        //
+                        // Currently, indirect inline template diagnostics (kind 3) are not shown at all by
+                        // the Language Service, because there is no sensible location in the user's code for
+                        // them. Such templates are an edge case, though, and should not be common.
+                        //
+                        // TODO(alxhub): figure out a good user experience for indirect template diagnostics
+                        // and show them from within the Language Service.
+                        diagnostics.push(...ngDiagnostics.filter(diag => diag.file !== undefined && diag.file.fileName === sourceFile.fileName));
+                    }
                 }
-            }
-            else {
-                const components = compiler.getComponentsWithTemplateFile(fileName);
-                for (const component of components) {
-                    if (ts.isClassDeclaration(component)) {
-                        diagnostics.push(...ttc.getDiagnosticsForComponent(component));
+                else {
+                    const components = compiler.getComponentsWithTemplateFile(fileName);
+                    for (const component of components) {
+                        if (ts.isClassDeclaration(component)) {
+                            diagnostics.push(...ttc.getDiagnosticsForComponent(component));
+                        }
                     }
                 }
-            }
-            this.compilerFactory.registerLastKnownProgram();
-            return diagnostics;
+                return diagnostics;
+            });
         }
         getDefinitionAndBoundSpan(fileName, position) {
-            return this.withCompiler((compiler) => {
+            return this.withCompilerAndPerfTracing(PerfPhase.LsDefinition, (compiler) => {
                 if (!isInAngularContext(compiler.getNextProgram(), fileName, position)) {
                     return undefined;
                 }
@@ -43552,7 +43616,7 @@ https://v9.angular.io/guide/template-typecheck#template-type-checking`,
             });
         }
         getTypeDefinitionAtPosition(fileName, position) {
-            return this.withCompiler((compiler) => {
+            return this.withCompilerAndPerfTracing(PerfPhase.LsDefinition, (compiler) => {
                 if (!isTemplateContext(compiler.getNextProgram(), fileName, position)) {
                     return undefined;
                 }
@@ -43561,56 +43625,57 @@ https://v9.angular.io/guide/template-typecheck#template-type-checking`,
             });
         }
         getQuickInfoAtPosition(fileName, position) {
-            return this.withCompiler((compiler) => {
-                if (!isTemplateContext(compiler.getNextProgram(), fileName, position)) {
-                    return undefined;
-                }
-                const templateInfo = getTemplateInfoAtPosition(fileName, position, compiler);
-                if (templateInfo === undefined) {
-                    return undefined;
-                }
-                const positionDetails = getTargetAtPosition(templateInfo.template, position);
-                if (positionDetails === null) {
-                    return undefined;
-                }
-                // Because we can only show 1 quick info, just use the bound attribute if the target is a two
-                // way binding. We may consider concatenating additional display parts from the other target
-                // nodes or representing the two way binding in some other manner in the future.
-                const node = positionDetails.context.kind === TargetNodeKind.TwoWayBindingContext ?
-                    positionDetails.context.nodes[0] :
-                    positionDetails.context.node;
-                return new QuickInfoBuilder(this.tsLS, compiler, templateInfo.component, node).get();
+            return this.withCompilerAndPerfTracing(PerfPhase.LsQuickInfo, (compiler) => {
+                return this.getQuickInfoAtPositionImpl(fileName, position, compiler);
             });
         }
+        getQuickInfoAtPositionImpl(fileName, position, compiler) {
+            if (!isTemplateContext(compiler.getNextProgram(), fileName, position)) {
+                return undefined;
+            }
+            const templateInfo = getTemplateInfoAtPosition(fileName, position, compiler);
+            if (templateInfo === undefined) {
+                return undefined;
+            }
+            const positionDetails = getTargetAtPosition(templateInfo.template, position);
+            if (positionDetails === null) {
+                return undefined;
+            }
+            // Because we can only show 1 quick info, just use the bound attribute if the target is a two
+            // way binding. We may consider concatenating additional display parts from the other target
+            // nodes or representing the two way binding in some other manner in the future.
+            const node = positionDetails.context.kind === TargetNodeKind.TwoWayBindingContext ?
+                positionDetails.context.nodes[0] :
+                positionDetails.context.node;
+            return new QuickInfoBuilder(this.tsLS, compiler, templateInfo.component, node).get();
+        }
         getReferencesAtPosition(fileName, position) {
-            const compiler = this.compilerFactory.getOrCreate();
-            const results = new ReferencesAndRenameBuilder(this.strategy, this.tsLS, compiler)
-                .getReferencesAtPosition(fileName, position);
-            this.compilerFactory.registerLastKnownProgram();
-            return results;
+            return this.withCompilerAndPerfTracing(PerfPhase.LsReferencesAndRenames, (compiler) => {
+                return new ReferencesAndRenameBuilder(this.strategy, this.tsLS, compiler)
+                    .getReferencesAtPosition(fileName, position);
+            });
         }
         getRenameInfo(fileName, position) {
-            var _a, _b, _c;
-            const compiler = this.compilerFactory.getOrCreate();
-            const renameInfo = new ReferencesAndRenameBuilder(this.strategy, this.tsLS, compiler)
-                .getRenameInfo(absoluteFrom(fileName), position);
-            if (!renameInfo.canRename) {
-                return renameInfo;
-            }
-            const quickInfo = (_a = this.getQuickInfoAtPosition(fileName, position)) !== null && _a !== void 0 ? _a : this.tsLS.getQuickInfoAtPosition(fileName, position);
-            const kind = (_b = quickInfo === null || quickInfo === void 0 ? void 0 : quickInfo.kind) !== null && _b !== void 0 ? _b : ts.ScriptElementKind.unknown;
-            const kindModifiers = (_c = quickInfo === null || quickInfo === void 0 ? void 0 : quickInfo.kindModifiers) !== null && _c !== void 0 ? _c : ts.ScriptElementKind.unknown;
-            return Object.assign(Object.assign({}, renameInfo), { kind, kindModifiers });
+            return this.withCompilerAndPerfTracing(PerfPhase.LsReferencesAndRenames, (compiler) => {
+                var _a, _b, _c;
+                const renameInfo = new ReferencesAndRenameBuilder(this.strategy, this.tsLS, compiler)
+                    .getRenameInfo(absoluteFrom(fileName), position);
+                if (!renameInfo.canRename) {
+                    return renameInfo;
+                }
+                const quickInfo = (_a = this.getQuickInfoAtPositionImpl(fileName, position, compiler)) !== null && _a !== void 0 ? _a : this.tsLS.getQuickInfoAtPosition(fileName, position);
+                const kind = (_b = quickInfo === null || quickInfo === void 0 ? void 0 : quickInfo.kind) !== null && _b !== void 0 ? _b : ts.ScriptElementKind.unknown;
+                const kindModifiers = (_c = quickInfo === null || quickInfo === void 0 ? void 0 : quickInfo.kindModifiers) !== null && _c !== void 0 ? _c : ts.ScriptElementKind.unknown;
+                return Object.assign(Object.assign({}, renameInfo), { kind, kindModifiers });
+            });
         }
         findRenameLocations(fileName, position) {
-            const compiler = this.compilerFactory.getOrCreate();
-            const results = new ReferencesAndRenameBuilder(this.strategy, this.tsLS, compiler)
-                .findRenameLocations(fileName, position);
-            this.compilerFactory.registerLastKnownProgram();
-            return results;
+            return this.withCompilerAndPerfTracing(PerfPhase.LsReferencesAndRenames, (compiler) => {
+                return new ReferencesAndRenameBuilder(this.strategy, this.tsLS, compiler)
+                    .findRenameLocations(fileName, position);
+            });
         }
-        getCompletionBuilder(fileName, position) {
-            const compiler = this.compilerFactory.getOrCreate();
+        getCompletionBuilder(fileName, position, compiler) {
             const templateInfo = getTemplateInfoAtPosition(fileName, position, compiler);
             if (templateInfo === undefined) {
                 return null;
@@ -43627,23 +43692,26 @@ https://v9.angular.io/guide/template-typecheck#template-type-checking`,
             return new CompletionBuilder(this.tsLS, compiler, templateInfo.component, node, positionDetails, isTypeScriptFile(fileName));
         }
         getCompletionsAtPosition(fileName, position, options) {
-            return this.withCompiler((compiler) => {
-                if (!isTemplateContext(compiler.getNextProgram(), fileName, position)) {
-                    return undefined;
-                }
-                const builder = this.getCompletionBuilder(fileName, position);
-                if (builder === null) {
-                    return undefined;
-                }
-                return builder.getCompletionsAtPosition(options);
+            return this.withCompilerAndPerfTracing(PerfPhase.LsCompletions, (compiler) => {
+                return this.getCompletionsAtPositionImpl(fileName, position, options, compiler);
             });
         }
+        getCompletionsAtPositionImpl(fileName, position, options, compiler) {
+            if (!isTemplateContext(compiler.getNextProgram(), fileName, position)) {
+                return undefined;
+            }
+            const builder = this.getCompletionBuilder(fileName, position, compiler);
+            if (builder === null) {
+                return undefined;
+            }
+            return builder.getCompletionsAtPosition(options);
+        }
         getCompletionEntryDetails(fileName, position, entryName, formatOptions, preferences) {
-            return this.withCompiler((compiler) => {
+            return this.withCompilerAndPerfTracing(PerfPhase.LsCompletions, (compiler) => {
                 if (!isTemplateContext(compiler.getNextProgram(), fileName, position)) {
                     return undefined;
                 }
-                const builder = this.getCompletionBuilder(fileName, position);
+                const builder = this.getCompletionBuilder(fileName, position, compiler);
                 if (builder === null) {
                     return undefined;
                 }
@@ -43651,11 +43719,11 @@ https://v9.angular.io/guide/template-typecheck#template-type-checking`,
             });
         }
         getCompletionEntrySymbol(fileName, position, entryName) {
-            return this.withCompiler((compiler) => {
+            return this.withCompilerAndPerfTracing(PerfPhase.LsCompletions, (compiler) => {
                 if (!isTemplateContext(compiler.getNextProgram(), fileName, position)) {
                     return undefined;
                 }
-                const builder = this.getCompletionBuilder(fileName, position);
+                const builder = this.getCompletionBuilder(fileName, position, compiler);
                 if (builder === null) {
                     return undefined;
                 }
@@ -43665,7 +43733,7 @@ https://v9.angular.io/guide/template-typecheck#template-type-checking`,
             });
         }
         getTcb(fileName, position) {
-            return this.withCompiler(compiler => {
+            return this.withCompilerAndPerfTracing(PerfPhase.LsTcb, compiler => {
                 const templateInfo = getTemplateInfoAtPosition(fileName, position, compiler);
                 if (templateInfo === undefined) {
                     return undefined;
@@ -43705,10 +43773,31 @@ https://v9.angular.io/guide/template-typecheck#template-type-checking`,
                 };
             });
         }
-        withCompiler(p) {
+        /**
+         * Provides an instance of the `NgCompiler` and traces perf results. Perf results are logged only
+         * if the log level is verbose or higher. This method is intended to be called once per public
+         * method call.
+         *
+         * Here is an example of the log output.
+         *
+         * Perf 245  [16:16:39.353] LanguageService#getQuickInfoAtPosition(): {"events":{},"phases":{
+         * "Unaccounted":379,"TtcSymbol":4},"memory":{}}
+         *
+         * Passing name of caller instead of using `arguments.caller` because 'caller', 'callee', and
+         * 'arguments' properties may not be accessed in strict mode.
+         *
+         * @param phase the `PerfPhase` to execute the `p` callback in
+         * @param p callback to be run synchronously with an instance of the `NgCompiler` as argument
+         * @return the result of running the `p` callback
+         */
+        withCompilerAndPerfTracing(phase, p) {
             const compiler = this.compilerFactory.getOrCreate();
-            const result = p(compiler);
+            const result = compiler.perfRecorder.inPhase(phase, () => p(compiler));
             this.compilerFactory.registerLastKnownProgram();
+            const logger = this.project.projectService.logger;
+            if (logger.hasLevel(ts.server.LogLevel.verbose)) {
+                logger.perftrc(`LanguageService#${PerfPhase[phase]}: ${JSON.stringify(compiler.perfRecorder.finalize())}`);
+            }
             return result;
         }
         getCompilerOptionsDiagnostics() {
@@ -43716,22 +43805,23 @@ https://v9.angular.io/guide/template-typecheck#template-type-checking`,
             if (!(project instanceof ts.server.ConfiguredProject)) {
                 return [];
             }
-            const diagnostics = [];
-            const configSourceFile = ts.readJsonConfigFile(project.getConfigFilePath(), (path) => project.readFile(path));
-            if (!this.options.strictTemplates && !this.options.fullTemplateTypeCheck) {
-                diagnostics.push({
-                    messageText: 'Some language features are not available. ' +
-                        'To access all features, enable `strictTemplates` in `angularCompilerOptions`.',
-                    category: ts.DiagnosticCategory.Suggestion,
-                    code: ngErrorCode(ErrorCode.SUGGEST_STRICT_TEMPLATES),
-                    file: configSourceFile,
-                    start: undefined,
-                    length: undefined,
-                });
-            }
-            const compiler = this.compilerFactory.getOrCreate();
-            diagnostics.push(...compiler.getOptionDiagnostics());
-            return diagnostics;
+            return this.withCompilerAndPerfTracing(PerfPhase.LsDiagnostics, (compiler) => {
+                const diagnostics = [];
+                const configSourceFile = ts.readJsonConfigFile(project.getConfigFilePath(), (path) => project.readFile(path));
+                if (!this.options.strictTemplates && !this.options.fullTemplateTypeCheck) {
+                    diagnostics.push({
+                        messageText: 'Some language features are not available. ' +
+                            'To access all features, enable `strictTemplates` in `angularCompilerOptions`.',
+                        category: ts.DiagnosticCategory.Suggestion,
+                        code: ngErrorCode(ErrorCode.SUGGEST_STRICT_TEMPLATES),
+                        file: configSourceFile,
+                        start: undefined,
+                        length: undefined,
+                    });
+                }
+                diagnostics.push(...compiler.getOptionDiagnostics());
+                return diagnostics;
+            });
         }
         watchConfigFile(project) {
             // TODO: Check the case when the project is disposed. An InferredProject