self-closing tag must be used to see an error when directive is used as a provider

[ghost]

todo_list_component.dart:

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
@Component(
  selector: 'todo-list',
  styleUrls: ['todo_list_component.css'],
  templateUrl: 'todo_list_component.html',
  directives: [],
  providers: [MaterialToggleComponent],
)
class TodoListComponent{}

todo_list_component.html: warning when a self closing tag <br/> is used.

<!--warning: Unresolved tag "material-toggle" -->
<br/>
<material-toggle>
</material-toggle>

No warning in this case:

<!-- no warning -->
<material-toggle>
</material-toggle>

angular_analyzer_plugin version: 0.0.17+3 Dart VM version: 2.0.0

[zoechi]

<br/> is invalid in HTML5

There are also tags that are forbidden to be closed: img, input, br, hr, meta, etc.

http://blog.teamtreehouse.com/to-close-or-not-to-close-tags-in-html5

[ghost]

Thanks, then in his case I think error message should be <br/> is an invalid tag in HTML5 and not Unresolved tag "material-toggle" it makes it appear as if there is some problem in material-toggle component.

[ghost]

In above case I intentionally passed MaterialToggleComponent as a provider and not as a directive. If MaterialToggleComponent is passed as a directive then we don't see any warning for both cases.

[MichaelRFairhurst]

@zoechi I don't think you're reading that blog correctly..? (Or I'm not!)

They mention <br /> specifically:

An example of a self closing tag is something like a line break (<br />)

And when they say "forbidden to be closed" I beleive they are referring to syntax like <br></br>., which is not the same as <br />, a self-closing tag.

Note that they say:

the following are both acceptable: <meta charset="UTF-8"> and <meta charset="UTF-8" />

and then say:

forbidden to be closed: img, input, br, hr, meta, etc.

In any case, the error message here would be wrong.

I'll look into this! Thanks for filing!

[zoechi]

@MichaelRFairhurst I'm sorry. I again mixed something up. Here it is explained properly https://www.w3.org/TR/html/syntax.html#start-tags

6. Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

[MichaelRFairhurst]

This title should probably be changed. There is an error in this:

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
@Component(
  selector: 'todo-list',
  styleUrls: ['todo_list_component.css'],
  templateUrl: 'todo_list_component.html',
  directives: [],
  providers: [MaterialToggleComponent],
)
class TodoListComponent{}

should move MaterialToggleComponent into Directives:

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
@Component(
  selector: 'todo-list',
  styleUrls: ['todo_list_component.css'],
  templateUrl: 'todo_list_component.html',
  directives: [MaterialToggleComponent],
  providers: [],
)
class TodoListComponent{}

Was this an error simply in the filing of this issue, or was this an actual error in the code?

If the latter this would, very strangely, make the issue backwards, like a self-closing tag must be used to see an error.

I'm thinking that might be explained by a caching issue or a crash.

[ghost]

In above case I intentionally passed MaterialToggleComponent as a provider and not as a directive. If MaterialToggleComponent is passed as a directive then we don't see any warning for both cases until a <br/> tag is introduced.