X Tutup
Skip to content

fix(HtmlParser): ng-content is not a void element #5586

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
vicb wants to merge 1 commit into from
Closed

fix(HtmlParser): ng-content is not a void element #5586

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion modules/angular2/src/compiler/html_tags.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,6 @@ export class HtmlTagDefinition {
// This implementation does not fully conform to the HTML5 spec.
var TAG_DEFINITIONS: {[key: string]: HtmlTagDefinition} = {
'link': new HtmlTagDefinition({isVoid: true}),
'ng-content': new HtmlTagDefinition({isVoid: true}),
'img': new HtmlTagDefinition({isVoid: true}),
'input': new HtmlTagDefinition({isVoid: true}),
'hr': new HtmlTagDefinition({isVoid: true}),
Expand Down
5 changes: 5 additions & 0 deletions modules/angular2/src/compiler/template_parser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,11 @@ class TemplateParseVisitor implements HtmlAstVisitor {
hasInlineTemplates ? null : component.findNgContentIndex(elementCssSelector);
var parsedElement;
if (preparsedElement.type === PreparsedElementType.NG_CONTENT) {
if (isPresent(element.children) && element.children.length > 0) {
this._reportError(
`<ng-content> element cannot have content. <ng-content> must be immediately followed by </ng-content>`,
element.sourceSpan);
}
parsedElement =
new NgContentAst(this.ngContentCount++, elementNgContentIndex, element.sourceSpan);
} else if (isTemplateElement) {
Expand Down
20 changes: 10 additions & 10 deletions modules/angular2/test/compiler/html_parser_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,8 @@ export function main() {
});

it('should tolerate end tags for void elements when they have no content', () => {
expect(humanizeDom(parser.parse('<ng-content></ng-content>', 'TestComp')))
.toEqual([[HtmlElementAst, 'ng-content', 0]]);
expect(humanizeDom(parser.parse('<input></input>', 'TestComp')))
.toEqual([[HtmlElementAst, 'input', 0]]);
});

it('should support optional end tags', () => {
Expand Down Expand Up @@ -215,27 +215,27 @@ export function main() {
});

it('should report text content in void elements', () => {
let errors = parser.parse('<ng-content>content</ng-content>', 'TestComp').errors;
let errors = parser.parse('<input>content</input>', 'TestComp').errors;
expect(errors.length).toEqual(1);
expect(humanizeErrors(errors))
.toEqual([
[
'ng-content',
'Void elements do not have end tags (they can not have content) "ng-content"',
'0:19'
'input',
'Void elements do not have end tags (they can not have content) "input"',
'0:14'
]
]);
});

it('should report html content in void elements', () => {
let errors = parser.parse('<ng-content><p></p></ng-content>', 'TestComp').errors;
let errors = parser.parse('<input><p></p></input>', 'TestComp').errors;
expect(errors.length).toEqual(1);
expect(humanizeErrors(errors))
.toEqual([
[
'ng-content',
'Void elements do not have end tags (they can not have content) "ng-content"',
'0:19'
'input',
'Void elements do not have end tags (they can not have content) "input"',
'0:14'
]
]);
});
Expand Down
6 changes: 6 additions & 0 deletions modules/angular2/test/compiler/template_parser_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -689,6 +689,12 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
});

describe('error cases', () => {
it('should report when ng-content has content', () => {
expect(() => parse('<ng-content>content</ng-content>', []))
.toThrowError(`Template parse errors:
<ng-content> element cannot have content. <ng-content> must be immediately followed by </ng-content> ("[ERROR ->]<ng-content>content</ng-content>"): TestComp@0:0`);
});

it('should report invalid property names', () => {
expect(() => parse('<div [invalid-prop]></div>', [])).toThrowError(`Template parse errors:
Can't bind to 'invalidProp' since it isn't a known native property ("<div [ERROR ->][invalid-prop]></div>"): TestComp@0:5`);
Expand Down
X Tutup