ИСКЛЮЧЕНИЕ: Ошибки анализа шаблона: только пустотные и посторонние элементы могут быть закрыты "мета",

После добавления компонента в массив директив корневого компонента Angular2 начинает жаловаться в браузере на собственный тег meta, который должен быть в порядке, и который также работает без жалоб, если директивы там нет.

Я пытаюсь добавить компонент my-header в свое приложение.

app.html

<div>
  <my-header></my-header>
</div>
<nav class="nav-bar">
  <div class="nav-bar-top-spacer"></div>
  <ul>
    <li *ngFor="#group of navigation" class="nav-option-group">
      <div class="nav-option-group"></div>
      <div (click)="hideGroup(group)" class="nav-option-group-name">{{ group.Croatian }}</div>
      <ul [ngClass]="{displayNone: !group.visible}">
        <li [routerLink]="[comp.componentName]" *ngFor="#comp of group.components" class="option-group-item">{{ comp.Croatian }}</li>
      </ul>
    </li>
    <li class="nav-option-group">
      <div class="nav-option-group-name">Odjavi se</div>
    </li>
  </ul>
</nav>
<router-outlet></router-outlet>

app.ts

    import { Component, View } from "angular2/core";
    import { COMMON_DIRECTIVES } from "angular2/common";
    import { Http } from "angular2/http";
    import { RouteConfig, RouterLink, RouterOutlet, Route, ROUTER_DIRECTIVES, Router} from 'angular2/router';

    import { Header } from '../app/header';
    import { AccountData } from '../settings/AccountData/AccountData';
    import { AccountDelete } from '../settings/AccountDelete/AccountDelete';
    import { AccountLogin } from '../settings/AccountLogin/AccountLogin';
    import { AccountPassword } from '../settings/AccountPassword/AccountPassword';
    import { AddTrack } from '../settings/AddTrack/AddTrack';
    import { EditUser } from '../settings/EditUser/EditUser';
    import { MakePlaylist } from '../settings/MakePlaylist/MakePlaylist';
    import { MakeWishlist } from '../settings/MakeWishlist/MakeWishlist';
    import { ManageAdmins } from '../settings/ManageAdmins/ManageAdmins';
    import { ManageEditors } from '../settings/ManageEditors/ManageEditors';
    import { ManageRadiostation } from '../settings/ManageRadiostation/ManageRadiostation';
    import { ManageTracks } from '../settings/ManageTracks/ManageTracks';
    import { ManageUsers } from '../settings/ManageUsers/ManageUsers';

    var components = ['AccountData', 'AccountDelete', 'AccountLogin'
        , 'AccountPassword', 'AddTrack', 'EditUser', 'MakePlaylist'
        , 'MakeWishlist', 'ManageAdmins', 'ManageEditors', 'ManageRadiostation'
        , 'ManageTracks', 'ManageUsers'];

    //var routes = components.map((componentName) => { return new Route(componentName, componentName, componentName) });

    @Component({
        selector: 'App',
        templateUrl: './dest/App/App.html',
        styles: [],
        directives: [ ROUTER_DIRECTIVES, COMMON_DIRECTIVES, Header ]
    })
    @RouteConfig([
        { path: '/', redirectTo: ['AccountData'] },
        { path: 'AccountData', name: 'AccountData', component: AccountData },
        { path: 'AccountDelete', name: 'AccountDelete', component: AccountDelete },
        { path: 'AccountLogin', name: 'AccountLogin', component: AccountLogin },
        { path: 'AccountPassword', name: 'AccountPassword', component: AccountPassword },
        { path: 'AddTrack', name: 'AddTrack', component: AddTrack },

        { path: 'EditUser', name: 'EditUser', component: EditUser },
        { path: 'MakePlaylist', name: 'MakePlaylist', component: MakePlaylist },
        { path: 'MakeWishlist', name: 'MakeWishlist', component: MakeWishlist },
        { path: 'ManageAdmins', name: 'ManageAdmins', component: ManageAdmins },
        { path: 'ManageEditors', name: 'ManageEditors', component: ManageEditors },
        { path: 'ManageRadiostation', name: 'ManageRadiostation', component: ManageRadiostation },
        { path: 'ManageTracks', name: 'ManageTracks', component: ManageTracks },
        { path: 'ManageUsers', name: 'ManageUsers', component: ManageUsers }
    ])
    export class App {
        router: Router;
        location: Location;
        navigation: any[];

        hideGroup(group): void {
            group.visible = !group.visible;
        }

        constructor(router: Router) {
            this.router = router;

            this.navigation = [
                {
                    'Croatian': 'Slusaj radio',
                    'groupName': 'Listen',
                    'components': []
                },
                {
                    'Croatian': 'Vlasničke mogućnosti',
                    'groupName': 'OwnerOptions',
                    'components': [
                        { 'Croatian': 'Upravljaj administratorima', 'componentName': 'ManageAdmins', 'componentObject': ManageAdmins },
                        { 'Croatian': 'Pregledaj podatke o postaji', 'componentName': 'ManageRadiostation', 'componentObject': ManageRadiostation }
                    ]
                },
                {
                    'Croatian': 'Administratorske modućnosti',
                    'groupName': 'AdminOptions',
                    'components': [
                        { 'Croatian': 'Uredi zvučne zapise', 'componentName': 'ManageTracks', 'componentObject': ManageTracks },
                        { 'Croatian': 'Upravljaj urednicima', 'componentName': 'ManageEditors', 'componentObject': ManageEditors },
                        { 'Croatian': 'Dodaj pjesmu', 'componentName': 'AddTrack', 'componentObject': AddTrack },
                        { 'Croatian': 'Upravljaj korisnicima', 'componentName': 'EditUser', 'componentObject': EditUser },
                    ]
                },
                {
                    'Croatian': 'Uredničke mogućnosti',
                    'groupName': 'EditorOptions',
                    'components': [
                        { 'Croatian': 'Pregledaj termine', 'componentName': 'MakePlaylist', 'componentObject': MakePlaylist }
                    ]
                },
                {
                    'Croatian': 'Korisničke mogućnosti',
                    'groupName': 'UserOptions',
                    'components': [
                        { 'Croatian': 'Pregledaj listu želja', 'componentName': 'MakeWishlist', 'componentObject': MakeWishlist }
                    ]
                },
                {
                    'Croatian': 'Postavke računa',
                    'groupName': 'AccountSettings',
                    'components': [
                        { 'Croatian': 'Uredi osobne podatke', 'componentName': 'AccountData', 'componentObject': AccountData },
                        { 'Croatian': 'Promijeni lozinku', 'componentName': 'AccountPassword', 'componentObject': AccountPassword },
                        { 'Croatian': 'Obriši račun', 'componentName': 'AccountDelete', 'componentObject': AccountDelete }
                        //  { 'Croatian': 'Login', 'componentName': 'Login', 'componentObject': Logi}
                    ]
                }
            ];

            for (var i = 0; i < this.navigation.length; ++i) {
                this.navigation[i].visible = true;
            }
        };
    }

header.html

<div class="header-bar">
  <div class="app-box"><a href="">
      <div class="app-name">FM Radio</div></a>
    <div class="app-descr">99.4 MHz</div>
  </div>
  <div class="user-box row">
    <div class="user-form-box">
      <form [ngFormModel]="loginForm" (onSubmit)="loginForm.value" method="post" action="/user/auth/login" class="row">
        <input type="email" id="email" placeholder="E-mail" [ngFormControl]="loginForm.controls['email']" [class.error]="!email.valid &amp;&amp; email.touched" [(ngModel)]="emailModel"/>
        <input type="password" id="password" placeholder="Lozinka" [ngFormControl]="loginForm.controls['password']" [class.error]="!password.valid &amp;&amp; password.touched" [(ngModel)]="passwordModel"/>
        <button type="submit">Prijavi se</button><a href="#register">
          <button type="button" class="dim">Registriraj se</button></a>
      </form>
    </div>
    <div class="user-name-box"><i class="material-icons user-icon">account_circle</i>
      <div class="user-name">Mirko Horvat<span class="user-type">administrator</span></div>
    </div>
  </div>
</div>

header.ts

import { Component } from 'angular2/core';
import { FORM_DIRECTIVES, COMMON_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control } from 'angular2/common';

@Component({ 
    selector: 'my-header',
    templateUrl: '.dest/app/header',
    styles: [],
    directives: [ FORM_DIRECTIVES, COMMON_DIRECTIVES ] 
})

export class Header {
    // @Input() modelName
    // @Output() eventEmitterName

    loginForm: ControlGroup;

    email: Control;
    password: Control;

    emailModel: string;
    passwordModel: string;

    constructor(fb, FormBuilder) {
        this.email = new Control('', Validators.required);
        this.password = new Control('', Validators.required);

        this.loginForm = fb.group({
            'email': this.email,
            'password': this.password
        });
    }
}

Ответ 1

Проблема заключалась в том, что, конечно, у меня была опечатка. .html at templateUrl: отсутствует.

У меня было:

@Component({ 
    selector: 'my-header',
    templateUrl: './dest/App/MyHeader',
    styles: [],
    directives: [ FORM_DIRECTIVES, COMMON_DIRECTIVES ] 
})

и я должен был

@Component({ 
    selector: 'my-header',
    templateUrl: './dest/App/MyHeader.html',
    styles: [],
    directives: [ FORM_DIRECTIVES, COMMON_DIRECTIVES ] 
})

Ответ 2

В реальности, несмотря на другой ответ, настоящую причину проблем можно найти в разделе BREAKING CHANGES angular2 changelog, в версии 2.0.0-alpha48:

Конечные теги, которые были допущены для элементов void без содержимого. Oни больше не разрешены, чтобы мы более внимательно следили за спецификацией HTML5.

Таким образом, если у вас есть код типа <example a="b" />, например, вы читаете его в примере в Интернете до версии angular2 ранее как 2.0.0-alpha48, это не сработает.

Но <example a="b"></example> будет работать!

Разработчики angular2 думают, что они хотят следовать HTML5 "более тесно". Мое мнение о том, что они должны делать, совсем другое.

Непонятно, что сообщение doc или сообщение об ошибке понимается как "пустое или чужие элементы". Я подозреваю, возможно, используя другое пространство имен html для наших собственных тегов (возможно, будет иметь <myapp:example a="b" />).

Ответ 3

Я предполагаю, что это ошибка. С одним из последних альфов или бета парсер Angular2 стал менее прощающим. Тег <meta> отсутствует в списке тегов, которые разрешены для самозакрывания.

См. также