javascript - angular 2 模板解析错误意外字符 EOF

Question

我刚刚在 Visual Studio 中打开并重新运行了我的 Angular 2 TS 应用。

我很确定上次我这样做时没有任何错误。

现在我在浏览器控制台中收到此错误并且应用程序未完全加载:

EXCEPTION: Template parse errors:
Unexpected character "EOF" ("
   test

</foot[ERROR ->]"): AppComponent@22:6
angular2.js:23083 EXCEPTION: Template parse errors:
Unexpected character "EOF" ("
   test

</foot[ERROR ->]"): AppComponent@22:6BrowserDomAdapter.logError @ angular2.js:23083
angular2.js:23083 STACKTRACE:BrowserDomAdapter.logError @ angular2.js:23083
angular2.js:23083 Error: Template parse errors:
Unexpected character "EOF" ("
   test

</foot[ERROR ->]"): AppComponent@22:6
    at new BaseException (http://localhost:55555/lib/angular2.js:7351:21)
    at TemplateNormalizer.normalizeLoadedTemplate (http://localhost:55555/lib/angular2.js:20019:15)
    at http://localhost:55555/lib/angular2.js:20008:24
    at Zone.run (http://localhost:55555/lib/angular2-polyfills.js:1243:24)
    at Zone.run (http://localhost:55555/lib/angular2.js:13438:32)
    at zoneBoundFn (http://localhost:55555/lib/angular2-polyfills.js:1220:26)
    at lib$es6$promise$$internal$$tryCatch (http://localhost:55555/lib/angular2-polyfills.js:468:17)
    at lib$es6$promise$$internal$$invokeCallback (http://localhost:55555/lib/angular2-polyfills.js:480:18)
    at lib$es6$promise$$internal$$publish (http://localhost:55555/lib/angular2-polyfills.js:451:12)
    at http://localhost:55555/lib/angular2-polyfills.js:123:10

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (http://localhost:55555/lib/angular2-polyfills.js:2236:29)
    at Zone.fork (http://localhost:55555/lib/angular2-polyfills.js:2285:47)
    at Zone.bind (http://localhost:55555/lib/angular2-polyfills.js:1218:53)
    at bindArguments (http://localhost:55555/lib/angular2-polyfills.js:1401:36)
    at lib$es6$promise$promise$$Promise.obj.(anonymous function) [as then] (http://localhost:55555/lib/angular2-polyfills.js:1413:46)
    at TemplateNormalizer.normalizeTemplate (http://localhost:55555/lib/angular2.js:20007:44)
    at TemplateCompiler.normalizeDirectiveMetadata (http://localhost:55555/lib/angular2.js:24233:39)
    at http://localhost:55555/lib/angular2.js:24306:24
    at Array.map (native)
    at Array.map (http://localhost:55555/lib/es6-shim.js:1113:14)

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (http://localhost:55555/lib/angular2-polyfills.js:2236:29)
    at Zone.fork (http://localhost:55555/lib/angular2-polyfills.js:2285:47)
    at NgZone._createInnerZone (http://localhost:55555/lib/angular2.js:13426:39)
    at new NgZone (http://localhost:55555/lib/angular2.js:13292:32)
    at createNgZone (http://localhost:55555/lib/angular2.js:12475:12)
    at PlatformRef_.application (http://localhost:55555/lib/angular2.js:12550:31)
    at Object.bootstrap (http://localhost:55555/lib/angular2.js:24805:64)
    at execute (http://localhost:55555/app/main.js:28:23)
    at u (http://localhost:55555/lib/system.js:5:3330)
    at Object.execute (http://localhost:55555/lib/system.js:5:6218)BrowserDomAdapter.logError @ angular2.js:23083
:55555/app/main.js:31 BaseExceptionmessage: "Template parse errors:↵Unexpected character "EOF" ("↵   test
↵    
↵</foot[ERROR ->]"): AppComponent@22:6"stack: "Error: Template parse errors:↵Unexpected character "EOF" ("↵   test
↵    
↵</foot[ERROR ->]"): AppComponent@22:6↵    at new BaseException (http://localhost:55555/lib/angular2.js:7351:21)↵    at TemplateNormalizer.normalizeLoadedTemplate (http://localhost:55555/lib/angular2.js:20019:15)↵    at http://localhost:55555/lib/angular2.js:20008:24↵    at Zone.run (http://localhost:55555/lib/angular2-polyfills.js:1243:24)↵    at Zone.run (http://localhost:55555/lib/angular2.js:13438:32)↵    at zoneBoundFn (http://localhost:55555/lib/angular2-polyfills.js:1220:26)↵    at lib$es6$promise$$internal$$tryCatch (http://localhost:55555/lib/angular2-polyfills.js:468:17)↵    at lib$es6$promise$$internal$$invokeCallback (http://localhost:55555/lib/angular2-polyfills.js:480:18)↵    at lib$es6$promise$$internal$$publish (http://localhost:55555/lib/angular2-polyfills.js:451:12)↵    at http://localhost:55555/lib/angular2-polyfills.js:123:10"__proto__: __(anonymous function) @ :55555/app/main.js:31

当我检查 AppComponent.ts 类时

import {Component} from 'angular2/core';
import {RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router';
import {FORM_PROVIDERS} from 'angular2/common';
import {RouterActive} from './router-active';
import {Schoolyears} from './schoolyears/schoolyear.component';
import {Administration} from './administration/administration.component';
import 'rxjs/add/operator/map';

@Component({
    selector: 'my-app',
    providers: [...FORM_PROVIDERS],
    directives: [...ROUTER_DIRECTIVES, RouterActive],
    pipes: [],
    styles: [],
    templateUrl: './app/app.html'   
})
@RouteConfig([
      { path: '/', component: Schoolyears, name: 'Index' },
        { path: '/schoolyears', component: Schoolyears, name: 'Index' },
        { path: '/administration', component: Administration, name: 'Administration' }

       //{ path: '/', redirectTo: ['Index'] } // otherwise url when not exist
])
export class AppComponent {
     name = 'Angular 2 Webpack Starter';
    url = 'https://twitter.com/AngularClass';
    constructor() {

    }
}

或 app.html

<header>
    <nav>
        <h1>Hello {{ name }}</h1>
        <ul>
            <li router-active>
                <a [routerLink]="['Index']">Schoolyears</a>
            </li>
            <li router-active>
                <a [routerLink]="['Administration']">Administration</a>
            </li>

        </ul>
    </nav>
</header>

<main>
    <router-outlet></router-outlet>
</main>

<footer>
   test

</footer>

我的 main.ts 是一切的入口点

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

import {provide} from 'angular2/core';
import {bootstrap, ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
//import {APP_BASE_HREF} from 'angular2/router';


const ENV_PROVIDERS = [];
ENV_PROVIDERS.push(ELEMENT_PROBE_PROVIDERS);

import {AppComponent} from './app.component'

bootstrap(AppComponent, [
    ...ENV_PROVIDERS,
    ...HTTP_PROVIDERS,
    ...ROUTER_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy })

])
    .catch(err => console.error(err));

我看不出有什么问题。

我该如何解决？

更新

在 main.js 文件中，我似乎得到了这个错误“如果”这是真正的错误...

Answer 1

这个错误很棘手，因为错误消息通常具有误导性。该错误将显示您最后一行 HTML；但是，不要在那里搜索问题!原因很简单，因为事先没有正确关闭标签。

这个错误可以通过关闭一个缺少结束标签的标签来修复。有时，就像我的 <textarea> ，这很难捕捉到，因为如果 <input>，Angular 就满足了。未关闭；然而，<textarea> 必须关闭。

如果您想知道哪些 HTML 元素标签必须关闭，只需搜索 tag omission关于您感兴趣的特定元素。

考虑通过 linter 运行您的 HTML 以快速捕获这些错误!

---

我的情况的代码示例

就我而言，我没有关闭我的 <textarea> 之一元素。

之前我的代码如下

<div class="form-group col-sm-6">
  <label for="example" class="form-label">Example</label>
  <textarea class="form-control" name="example" formControlName="example" lines="2">
</div>

为了解决这个问题，我只是关闭了 <textarea>元素，如下

<div class="form-group col-sm-6">
  <label for="example" class="form-label">Example</label>
  <textarea class="form-control" name="example" formControlName="example" lines="2"></textarea>
</div>