Question

我刚刚在视觉工作室打开并重新运行我的角度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>

我的主要内容是所有内容的入口点

///<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文件中，我似乎得到了这个错误＆＃34;如果＆＃34;那是真正的错误...

Answer 1

我收到了意外字符“EOF”错误，很难调试，我做了什么来解决问题：

我的组件模板文件中有一条html注释：  我改成了：  并且这不是第一次，每次我有这个错误我修复html评论开始而不是--->，问题就解决了。< / p>

请参阅：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/The_Importance_of_Correct_HTML_Commenting

在我的情况下，这是评论，但我认为通常你需要有有效的html，否则解析器可能会抛出该错误。

Answer 2

此错误很棘手，因为错误消息通常会产生误导。该错误将显示最后一行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>

Answer 3

此错误是由于a2和webpack html-loader之间的某些不兼容性造成的。 official a2 webpack guide中使用的解决方法是

  htmlLoader: {
    minimize: false // workaround for ng2
  },

有关此内容的更多信息，请参阅issue 7295

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

3 个答案:

我的情况的代码示例