Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(compiler-cli): detect missing control flow directive imports
This commit adds an extended diagnostics check that verifies that all control flow directives (such as `ngIf`, `ngFor`) have matching directives. Currently there is no diagnistics produced for such cases, which makes it harded for developers to detect and find a problem.
- Loading branch information
1 parent
8629f2d
commit 732c1c4
Showing
10 changed files
with
255 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
...mpiler-cli/src/ngtsc/typecheck/extended/checks/missing_control_flow_directive/BUILD.bazel
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
load("//tools:defaults.bzl", "ts_library") | ||
|
||
ts_library( | ||
name = "missing_control_flow_directive", | ||
srcs = ["index.ts"], | ||
visibility = ["//packages/compiler-cli/src/ngtsc:__subpackages__"], | ||
deps = [ | ||
"//packages/compiler", | ||
"//packages/compiler-cli/src/ngtsc/core:api", | ||
"//packages/compiler-cli/src/ngtsc/diagnostics", | ||
"//packages/compiler-cli/src/ngtsc/typecheck/api", | ||
"//packages/compiler-cli/src/ngtsc/typecheck/extended/api", | ||
"@npm//typescript", | ||
], | ||
) |
72 changes: 72 additions & 0 deletions
72
.../compiler-cli/src/ngtsc/typecheck/extended/checks/missing_control_flow_directive/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
/** | ||
* @license | ||
* Copyright Google LLC All Rights Reserved. | ||
* | ||
* 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 | ||
*/ | ||
|
||
import {AST, TmplAstNode, TmplAstTemplate} from '@angular/compiler'; | ||
import ts from 'typescript'; | ||
|
||
import {NgCompilerOptions} from '../../../../core/api'; | ||
import {ErrorCode, ExtendedTemplateDiagnosticName} from '../../../../diagnostics'; | ||
import {NgTemplateDiagnostic} from '../../../api'; | ||
import {TemplateCheckFactory, TemplateCheckWithVisitor, TemplateContext} from '../../api'; | ||
|
||
/** | ||
* The list of known control flow directives present in the `CommonModule`. | ||
* | ||
* Note: there is no `ngSwitch` here since it's typically used as a regular | ||
* binding (e.g. `[ngSwitch]`), however the `ngSwitchCase` and `ngSwitchDefault` | ||
* are used as structural directives and a warning would be generated. Once the | ||
* `CommonModule` is included, the `ngSwitch` would also be covered. | ||
*/ | ||
const KNOWN_CONTROL_FLOW_DIRECTIVES = new Set(['ngIf', 'ngFor', 'ngSwitchCase', 'ngSwitchDefault']); | ||
|
||
/** | ||
* Ensures that there are no known control flow directives (such as *ngIf and *ngFor) | ||
* used in a template without importing a `CommonModule`. Returns diagnostics in case | ||
* such a directive is detected. Note: this check only handles the cases when structural | ||
* directive syntax is used (e.g. `*ngIf`). Regular binding syntax (e.g. `[ngIf]`) is | ||
* handled separately in type checker and treated as a hard error instead of a warning. | ||
*/ | ||
class MissingControlFlowDirectiveCheck extends | ||
TemplateCheckWithVisitor<ErrorCode.MISSING_CONTROL_FLOW_DIRECTIVE> { | ||
override code = ErrorCode.MISSING_CONTROL_FLOW_DIRECTIVE as const; | ||
|
||
override visitNode( | ||
ctx: TemplateContext<ErrorCode.MISSING_CONTROL_FLOW_DIRECTIVE>, | ||
component: ts.ClassDeclaration, | ||
node: TmplAstNode|AST): NgTemplateDiagnostic<ErrorCode.MISSING_CONTROL_FLOW_DIRECTIVE>[] { | ||
if (!(node instanceof TmplAstTemplate)) return []; | ||
|
||
const controlFlowAttr = | ||
node.templateAttrs.find(attr => KNOWN_CONTROL_FLOW_DIRECTIVES.has(attr.name)); | ||
if (!controlFlowAttr) return []; | ||
|
||
const symbol = ctx.templateTypeChecker.getSymbolOfNode(node, component); | ||
if (symbol === null || symbol.directives.length > 0) { | ||
return []; | ||
} | ||
|
||
const sourceSpan = controlFlowAttr.keySpan || controlFlowAttr.sourceSpan; | ||
const errorMessage = `The \`*${controlFlowAttr.name}\` directive was used in the template, ` + | ||
`but the \`CommonModule\` was not imported. Please make sure that the \`CommonModule\` ` + | ||
`is included into the \`@NgModule.imports\` array of an @NgModule that declares this ` + | ||
`component or to the \`@Component.imports\` array of this component if it's marked as ` + | ||
`standalone (if it has the \`standalone: true\` flag in the @Component decorator).`; | ||
const diagnostic = ctx.makeTemplateDiagnostic(sourceSpan, errorMessage); | ||
return [diagnostic]; | ||
} | ||
} | ||
|
||
export const factory: TemplateCheckFactory< | ||
ErrorCode.MISSING_CONTROL_FLOW_DIRECTIVE, | ||
ExtendedTemplateDiagnosticName.MISSING_CONTROL_FLOW_DIRECTIVE> = { | ||
code: ErrorCode.MISSING_CONTROL_FLOW_DIRECTIVE, | ||
name: ExtendedTemplateDiagnosticName.MISSING_CONTROL_FLOW_DIRECTIVE, | ||
create: (options: NgCompilerOptions) => { | ||
return new MissingControlFlowDirectiveCheck(); | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
...r-cli/src/ngtsc/typecheck/extended/test/checks/missing_control_flow_directive/BUILD.bazel
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
load("//tools:defaults.bzl", "jasmine_node_test", "ts_library") | ||
|
||
ts_library( | ||
name = "test_lib", | ||
testonly = True, | ||
srcs = ["missing_control_flow_directive_spec.ts"], | ||
deps = [ | ||
"//packages/compiler", | ||
"//packages/compiler-cli/src/ngtsc/core:api", | ||
"//packages/compiler-cli/src/ngtsc/diagnostics", | ||
"//packages/compiler-cli/src/ngtsc/file_system", | ||
"//packages/compiler-cli/src/ngtsc/file_system/testing", | ||
"//packages/compiler-cli/src/ngtsc/testing", | ||
"//packages/compiler-cli/src/ngtsc/typecheck/extended", | ||
"//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/missing_control_flow_directive", | ||
"//packages/compiler-cli/src/ngtsc/typecheck/testing", | ||
"@npm//typescript", | ||
], | ||
) | ||
|
||
jasmine_node_test( | ||
name = "test", | ||
bootstrap = ["//tools/testing:node_no_angular_es2015"], | ||
deps = [ | ||
":test_lib", | ||
], | ||
) |
128 changes: 128 additions & 0 deletions
128
...xtended/test/checks/missing_control_flow_directive/missing_control_flow_directive_spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,128 @@ | ||
/** | ||
* @license | ||
* Copyright Google LLC All Rights Reserved. | ||
* | ||
* 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 | ||
*/ | ||
|
||
import {DiagnosticCategoryLabel} from '@angular/compiler-cli/src/ngtsc/core/api'; | ||
import ts from 'typescript'; | ||
|
||
import {ErrorCode, ExtendedTemplateDiagnosticName, ngErrorCode} from '../../../../../diagnostics'; | ||
import {absoluteFrom, getSourceFileOrError} from '../../../../../file_system'; | ||
import {runInEachFileSystem} from '../../../../../file_system/testing'; | ||
import {getSourceCodeForDiagnostic} from '../../../../../testing'; | ||
import {getClass, setup} from '../../../../testing'; | ||
import {factory as missingControlFlowDirectiveCheck} from '../../../checks/missing_control_flow_directive'; | ||
import {ExtendedTemplateCheckerImpl} from '../../../src/extended_template_checker'; | ||
|
||
const KNOWN_CONTROL_FLOW_DIRECTIVES = ['ngIf', 'ngFor', 'ngSwitchCase', 'ngSwitchDefault']; | ||
|
||
runInEachFileSystem.native(() => { | ||
describe('MissingControlFlowDirectiveCheck', () => { | ||
KNOWN_CONTROL_FLOW_DIRECTIVES.forEach(directive => { | ||
['div', 'ng-template', 'ng-container', 'ng-content'].forEach(element => { | ||
it(`should produce a warning when the '${directive}' directive is not imported ` + | ||
`(when used on the '${element}' element)`, | ||
() => { | ||
const fileName = absoluteFrom('/main.ts'); | ||
const {program, templateTypeChecker} = setup([{ | ||
fileName, | ||
templates: { | ||
'TestCmp': `<${element} *${directive}="exp"></${element}>`, | ||
}, | ||
}]); | ||
const sf = getSourceFileOrError(program, fileName); | ||
const component = getClass(sf, 'TestCmp'); | ||
const extendedTemplateChecker = new ExtendedTemplateCheckerImpl( | ||
templateTypeChecker, program.getTypeChecker(), [missingControlFlowDirectiveCheck], | ||
{} /* options */); | ||
const diags = extendedTemplateChecker.getDiagnosticsForComponent(component); | ||
expect(diags.length).toBe(1); | ||
expect(diags[0].category).toBe(ts.DiagnosticCategory.Warning); | ||
expect(diags[0].code).toBe(ngErrorCode(ErrorCode.MISSING_CONTROL_FLOW_DIRECTIVE)); | ||
expect(getSourceCodeForDiagnostic(diags[0])).toBe(directive); | ||
}); | ||
|
||
it(`should *not* produce a warning when the '${directive}' directive is imported ` + | ||
`(when used on the '${element}' element)`, | ||
() => { | ||
const className = directive.charAt(0).toUpperCase() + directive.substr(1); | ||
const fileName = absoluteFrom('/main.ts'); | ||
const {program, templateTypeChecker} = setup([{ | ||
fileName, | ||
templates: { | ||
'TestCmp': `<${element} *${directive}="exp"></${element}>`, | ||
}, | ||
source: ` | ||
export class TestCmp {} | ||
export class ${className} {} | ||
`, | ||
declarations: [{ | ||
type: 'directive', | ||
name: className, | ||
selector: `[${directive}]`, | ||
}], | ||
}]); | ||
const sf = getSourceFileOrError(program, fileName); | ||
const component = getClass(sf, 'TestCmp'); | ||
const extendedTemplateChecker = new ExtendedTemplateCheckerImpl( | ||
templateTypeChecker, program.getTypeChecker(), [missingControlFlowDirectiveCheck], | ||
{strictNullChecks: true} /* options */); | ||
const diags = extendedTemplateChecker.getDiagnosticsForComponent(component); | ||
// No diagnostic messages are expected. | ||
expect(diags.length).toBe(0); | ||
}); | ||
|
||
it(`should *not* produce a warning when the '${directive}' directive selector attribute ` + | ||
`is present on the '${element}' element, but the directive is not imported`, | ||
() => { | ||
const className = directive.charAt(0).toUpperCase() + directive.substr(1); | ||
const fileName = absoluteFrom('/main.ts'); | ||
const {program, templateTypeChecker} = setup([{ | ||
fileName, | ||
templates: { | ||
'TestCmp': `<${element} *${directive}="exp"></${element}>`, | ||
}, | ||
source: ` | ||
export class TestCmp {} | ||
export class ${className} {} | ||
`, | ||
declarations: [{ | ||
type: 'directive', | ||
name: className, | ||
selector: `[${directive}]`, | ||
}], | ||
}]); | ||
const sf = getSourceFileOrError(program, fileName); | ||
const component = getClass(sf, 'TestCmp'); | ||
const extendedTemplateChecker = new ExtendedTemplateCheckerImpl( | ||
templateTypeChecker, program.getTypeChecker(), [missingControlFlowDirectiveCheck], | ||
{strictNullChecks: true} /* options */); | ||
const diags = extendedTemplateChecker.getDiagnosticsForComponent(component); | ||
// No diagnostic messages are expected. | ||
expect(diags.length).toBe(0); | ||
}); | ||
}); | ||
}); | ||
|
||
it(`should *not* produce a warning for other missing structural directives`, () => { | ||
const fileName = absoluteFrom('/main.ts'); | ||
const {program, templateTypeChecker} = setup([{ | ||
fileName, | ||
templates: { | ||
'TestCmp': `<div *foo="exp"></div>`, | ||
}, | ||
}]); | ||
const sf = getSourceFileOrError(program, fileName); | ||
const component = getClass(sf, 'TestCmp'); | ||
const extendedTemplateChecker = new ExtendedTemplateCheckerImpl( | ||
templateTypeChecker, program.getTypeChecker(), [missingControlFlowDirectiveCheck], | ||
{strictNullChecks: true} /* options */); | ||
const diags = extendedTemplateChecker.getDiagnosticsForComponent(component); | ||
// No diagnostic messages are expected. | ||
expect(diags.length).toBe(0); | ||
}); | ||
}); | ||
}); |