javascript - angular 2 Template parse errors unexpected character EOF

I just opened and rerun my angular 2 TS app in visual studio.

Last time I did this it worked without any error I am pretty sure.

Now I get this error in the browser console and the app is not loading completely:

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

When I check the AppComponent.ts class

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/schoolyearponent';
import {Administration} from './administration/administrationponent';
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 = '';
    constructor() {

    }
}

or the 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>

My main.ts which is the entry poin to everything

///<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 './appponent'

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

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

I can not see anything wrong.

How can I fix that?

UPDATE

In the main.js file I seem to get this error "if" that is the real error...

I just opened and rerun my angular 2 TS app in visual studio.

Last time I did this it worked without any error I am pretty sure.

Now I get this error in the browser console and the app is not loading completely:

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

When I check the AppComponent.ts class

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() {

    }
}

or the 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>

My main.ts which is the entry poin to everything

///<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));

I can not see anything wrong.

How can I fix that?

UPDATE

In the main.js file I seem to get this error "if" that is the real error...

Share Improve this question edited Mar 5, 2016 at 17:22 asked Mar 5, 2016 at 16:05 Elisabeth 21.2k57 gold badges208 silver badges325 bronze badges

Are you getting any 404 errors? What are your other components like (Schoolyears, Administration, RouterActive)? – Sasxa Commented Mar 5, 2016 at 16:16
No 404 errors. The RouterActive is from github.com/AngularClass/angular2-webpack-starter. There is no compile error in Schoolyears/Administration. – Elisabeth Commented Mar 5, 2016 at 16:37
I totally removed the footer, saved and refreshed then it works again! When I put any html-tag after main-tag I get that same error again, what is that? This is so weird, when I restart my server without any html-tag after the main-tag, then I get errors about the main-tag LOL – Elisabeth Commented Mar 5, 2016 at 16:57
Check your order of imports- I had this issue, and few weeks ago same Unexpected character "EOF" that turned out to be caused by the same thing... Really hard to debug /; – Sasxa Commented Mar 5, 2016 at 17:00
I have 7 imports in app.component.ts. That are 128 different orders ;-) As you said it just worked one time then again not... – Elisabeth Commented Mar 5, 2016 at 17:09

| Show 6 more comments

4 Answers 4

Sorted by: Reset to default 8

This error is tricky, since the error message is often misleading. The error will show one of your last lines of HTML; however, don't search for the issue there! This is simply the case because a tag was not closed properly beforehand.

This error is fixed by closing a tag which is missing its closing tag. Sometimes, like in my case of <textarea>, this is tricky to catch because Angular is satisfied if <input> is unclosed; however, <textarea> must be closed.

If you're wondering which HTML element tags must be closed, simply search for tag omission in regards to the specific element you're curious about.

Consider running your HTML through a linter in order to quickly catch these errors!

Code example of my situation

In my case, I was not closing one of my <textarea> elements.

Previously my code was as follows

<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>

To fix this issue, I simply closed the <textarea> element, as follows

<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>

I got the Unexpected character "EOF" error , pretty hard to debug , what i did to solve the problem :

There was an html comment in my component's template file :  i changed it to :  and it wasn't the first time , every time i have this error i fix html comments to start with  and not --->, and the problem is solved.

See : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/The_Importance_of_Correct_HTML_Commenting

In my case it was comments , but i think that in general you need to have valid html, or the parser could throw that error.

I have noticed you get it when HTML is invalid in Angular2 app. So, try to debug by elimination, unusual html tags etc.. In my case, I was missing closing.

This error is due to some incompatibility between a2 and webpack html-loader. A workaround as used in official a2 webpack guide is

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

More about this can be found in issue 7295

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - angular 2 Template parse errors unexpected character EOF - Stack Overflow

4 Answers 4

Code example of my situation

与本文相关的文章

评论列表(0)