To provide information for DAS clients the server_plugin plugin contributes several extensions.
Angular analysis errors are automatically merged into normal errors notifications for Dart and HTML files.
Installing
Download chrome depot tools, and clone this repository.
Then run
./tools/get_deps.sh
cd server_plugin/bin
./make_snapshot
Back up sdk_path/snapshots/analysis_server.dart.snapshot and replace it with server.snapshot. Restart the dart analysis server by clicking the skull.
Check the pubspec.yaml in your project for transformers. They are not supported. You must manually add CORE_DIRECTIVES to your components right now for this plugin to work.
Chart of Current Features
All regular dart errors (that is to say, errors defined purely by the dart language spec) are not shown in this list.
Autocomplete is available in a branch, and only in editors that support it, and maybe with bugs (many don't replace the correct content during autocomplete within html, for instance).
✅ soundness of expression, type of expression, existence of value on element or directive
🌗 in some editors
❌
❌
<input bind-value="firstName">
✅
🌗 in some editors; complete inside binding but binding not suggested
❌
❌
<div [attr.role]="myAriaRole">
🌗 soundness of expression, but no other validation
🌗 in some editors; complete inside binding but binding not suggested
❌
❌
<div [class.extra-sparkle]="isDelightful">
✅ validity of clasname, soundness of expression, type of expression must be bool
🌗 in some editors; complete inside binding but binding not suggested
❌
❌
<div [style.width.px]="mySize">
🌖 soundness of expression, css properties are generally checked but not against a dictionary, same for units, expression must type to int if units are present
🌗 in some editors; complete inside binding but binding not suggested
❌
❌
<button (click)="readRainbow($event)">
✅ in some editors; soundness of expression, type of $event, existence of output on component/element and DOM events which propagate can be tracked anywhere
🌗 in some editors
❌
❌
<button on-click="readRainbow($event)">
:white_check_mark
🌗 in some editors; complete inside binding but binding not suggested
❌
❌
<div title="Hello {{ponyName}}">
✅ in some editors; soundness of expression, matching mustache delimiters
🌗 in some editors
❌
❌
<p>Hello {{ponyName}}</p>
✅ in some editors; soundness of expression, matching mustache delimiters
🌗 in some editors
❌
❌
<my-cmp></my-cmp>
✅ in some editors; Existence of directive
🌗 in some editors
❌
❌
<my-cmp [(title)]="name">
✅ soundness of expression, existence of title input and titleChange output on directive or component with proper type
🌗 in some editors; complete inside binding but binding not suggested
⚠️ Requires quotes around key value strings to work
🌗 in some editors;
❌
❌
Forms
Validation
Auto-Complete
Navigation
Refactoring
<input [(ngModel)]="userName">
✅
🌗 in some editors; completion inside binding but binding not suggested
❌
❌
<form #myform="ngForm">
✅ if ngForm is not an exported directive
🌗 in some editors; completion of variable but ngForm not suggested
❌
❌
Class decorators
Validation
Auto-Complete
Navigation
Refactoring
@Component(...) class MyComponent {}
✅ Validates directives list is all directives, that the template file exists, that a template is specified via string or URL but not both, requires a valid selector
🚷
🚷
🚷
@View(...) class MyComponent {}
⚠️ Supported, requires @Directive or @Component, but doesn't catch ambigous cases such as templates defined in the @View as well as @Component
🚷
🚷
🚷
@Directive(...) class MyDirective {}
✅ Validates directives list is all directives, that the template file exists, that a template is specified via string or URL but not both, requires a valid selector
🚷
🚷
🚷
@Pipe(...) class MyPipe {}
❌
🚷
🚷
❌
@Injectable() class MyService {}
❌
🚷
🚷
❌
Directive configuration
Validation
Auto-Complete
Navigation
Refactoring
@Directive(property1: value1, ...)
⚠️ deprecated, but supported
🚷
🚷
🚷
selector: '.cool-button:not(a)'
✅
🚷
❌
❌
providers: [MyService, provide(...)]
❌
❌
❌
❌
inputs: ['myprop', 'myprop2: byname']
✅
❌
❌
❌
outputs: ['myprop', 'myprop2: byname']
✅
❌
❌
❌
@Component extends @Directive, so the @Directive configuration applies to components as well
Component Configuration
Validation
Auto-Complete
Navigation
Refactoring
viewProviders: [MyService, provide(...)]
❌
❌
❌
❌
template: 'Hello {{name}}'
✅
🌗 in some editors
❌
❌
templateUrl: 'my-component.html'
✅
❌
❌
❌
styles: ['.primary {color: red}']
❌
🚷
🚷
🚷
styleUrls: ['my-component.css']
❌
❌
❌
❌
directives: [MyDirective, MyComponent]
✅ must be directives or lists of directives, configuration affects view errors
❌
❌
❌
pipes: [MyPipe, OtherPipe]
❌
❌
❌
❌
Class field decorators for directives and components
Validation
Auto-Complete
Navigation
Refactoring
@Input() myProperty;
✅
🚷
❌
❌
@Input("name") myProperty;
✅
🚷
❌
❌
@Output() myEvent = new EventEmitter();
✅ Subtype of Stream<T> required, streamed type determines $event type
