These are chat archives for AngularClass/angular2-webpack-starter

14th
Feb 2016
Artur Rozwalak
@arozwalak
Feb 14 2016 11:07

hi guys, I just downloaded v3.0.0. I have a problem when trying to add new component in app.ts

app.ts

import {Component} from 'angular2/core';
import {RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router';

import {Topbar} from './_components/topbar/topbar';
import {Home} from './home/home';

@Component({
    selector: 'app',
    directives: [ ...ROUTER_DIRECTIVES, Topbar ],
    template: `<topbar></topbar>
        <router-outlet></router-outlet>
    `
})
@RouteConfig([
    { path: '/', component: Home, name: 'Index' },
    { path: '/**', redirectTo: ['Index'] }
])
export class App {
    constructor() {
    }
}

topbar.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'topbar',
    templateUrl: require('./topbar.html')
})
export class Topbar {
    constructor () {}
}

topbar.html

<div>Topbar</div>
when I run webpack dev server I get this error
EXCEPTION: Template parse errors:
Unexpected closing tag "head" ("
    <link rel="stylesheet" href="/assets/css/styles.css">

[ERROR ->]</head>

<body>
"): Topbar@16:0
Unexpected closing tag "html" ("

<script src="polyfills.bundle.js"></script><script src="main.bundle.js"></script></body>
[ERROR ->]</html>
"): Topbar@30:0
and
BaseException {message: "Template parse errors:↵Unexpected closing tag "hea…/script></body>↵[ERROR ->]</html>↵"): Topbar@30:0", stack: "Error: Template parse errors:↵Unexpected closing t…ttp://localhost:3000/polyfills.bundle.js:6302:11)"}message: "Template parse errors:↵Unexpected closing tag "head" ("↵    <link rel="stylesheet" href="/assets/css/styles.css">↵↵[ERROR ->]</head>↵↵<body>↵"): Topbar@16:0↵Unexpected closing tag "html" ("↵↵<script src="polyfills.bundle.js"></script><script src="main.bundle.js"></script></body>↵[ERROR ->]</html>↵"): Topbar@30:0"stack: "Error: Template parse errors:↵Unexpected closing tag "head" ("↵    <link rel="stylesheet" href="/assets/css/styles.css">↵↵[ERROR ->]</head>↵↵<body>↵"): Topbar@16:0↵Unexpected closing tag "html" ("↵↵<script src="polyfills.bundle.js"></script><script src="main.bundle.js"></script></body>↵[ERROR ->]</html>↵"): Topbar@30:0↵    at new BaseException (http://localhost:3000/main.bundle.js:841:24)↵    at TemplateNormalizer.normalizeLoadedTemplate (http://localhost:3000/main.bundle.js:21528:20)↵    at http://localhost:3000/main.bundle.js:21517:66↵    at Zone.run (http://localhost:3000/polyfills.bundle.js:7283:25)↵    at Zone.run (http://localhost:3000/main.bundle.js:11140:43)↵    at zoneBoundFn (http://localhost:3000/polyfills.bundle.js:7260:27)↵    at lib$es6$promise$$internal$$tryCatch (http://localhost:3000/polyfills.bundle.js:6508:18)↵    at lib$es6$promise$$internal$$invokeCallback (http://localhost:3000/polyfills.bundle.js:6520:19)↵    at lib$es6$promise$$internal$$publish (http://localhost:3000/polyfills.bundle.js:6491:13)↵    at http://localhost:3000/polyfills.bundle.js:6163:11↵    at microtask (http://localhost:3000/main.bundle.js:11180:30)↵    at Zone.run (http://localhost:3000/polyfills.bundle.js:7283:25)↵    at Zone.run (http://localhost:3000/main.bundle.js:11140:43)↵    at zoneBoundFn (http://localhost:3000/polyfills.bundle.js:7260:27)↵    at MutationObserver.lib$es6$promise$asap$$flush (http://localhost:3000/polyfills.bundle.js:6302:11)"__proto__: __constructor: BaseException(message)toString: ()__proto__: DefineError.bi(anonymous function) @ main.ts:34Zone.run @ zone-microtask.ts:20zoneBoundFn @ zone-microtask.ts:20Zone.run @ zone-microtask.ts:20zoneBoundFn @ zone-microtask.ts:20lib$es6$promise$$internal$$tryCatch @ zone-microtask.ts:20lib$es6$promise$$internal$$invokeCallback @ zone-microtask.ts:20lib$es6$promise$$internal$$publish @ zone-microtask.ts:20lib$es6$promise$$internal$$publishRejection @ zone-microtask.ts:20(anonymous function) @ zone-microtask.ts:20microtask @ ng_zone.ts:410Zone.run @ zone-microtask.ts:20(anonymous function) @ ng_zone.ts:371zoneBoundFn @ zone-microtask.ts:20lib$es6$promise$asap$$flush @ zone-microtask.ts:20
I noticed that in webpack dev config file files with .html extension are loaded as raw files