angular2 meteor routing - Error when more than one route

Question

In a meteor-angular2 app, when only the route pointing to 'frontend' is listed, everything works correctly. If I add another route, as demonstrated in following code block, I get the following error:

Uncaught (in promise) Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/metis/metis
Error loading http://localhost:3000/client/app

app.ts

import {Component, View, provide} from 'angular2/core';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, APP_BASE_HREF} from 'angular2/router';
import {bootstrap} from 'angular2-meteor';
import {Frontend} from "./frontend/frontend"; 
import {Metis} from "metis/metis";

@Component({
    selector: 'app',
    template:'<router-outlet></router-outlet>',
    directives:[ROUTER_DIRECTIVES]
})
@RouteConfig([
    { path: '/', name: 'Frontend', component: Frontend },
    { path: '/metis', name: 'Metis', component: Metis  }
])
class HATViz {}

bootstrap(HATViz, [
    ROUTER_PROVIDERS,
    provide(APP_BASE_HREF, { useValue: '/' })
]);

The Metis component looks like that:

import {Component, OnInit} from 'angular2/core';

@Component({
    templateUrl:'client/metis/metis.html',
    selector:'metis'
})
export class Metis {
}

Answer 1

The error

Uncaught (in promise) Uncaught SyntaxError: Unexpected token <

means the SystemJS could not download corresponding js file (server responded with index HTML page instead). Looks like your metis component import is incorrect. Should be (note "." in front):

import {Metis} from "./metis/metis";