maxhb maxhb - 1 year ago 151
TypeScript Question

EXCEPTION: Error in ./e class e_Host - inline template 0:0

While upgrading an

project to RC5 I ran into a big problem. Reduced all code to the minimum to debug the issue but did not find it's root. Every request of my app results in the following error mesage (Developer console in browser):

EXCEPTION: Error in ./e class e_Host - inline template 0:0

ORIGINAL EXCEPTION: The selector "ng-component" did not match any elements

My streamlined code looks like this, I believe this is as basic as one can get:


///<reference path="../node_modules/typescript/lib/lib.es6.d.ts"/>
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AdminModule } from './component/admin/admin.module';



import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {TestComponent} from '../admin/test/test';

declarations: [TestComponent],
providers: [],
imports: [BrowserModule],
bootstrap: [TestComponent],
export class AdminModule {


import {Component} from '@angular/core';
//templateUrl : 'public/component/admin/test/test.html',
template: '<h1>Hello World!</h1>',
directives: []
export class TestComponent {}

I double and triple checked each path and include for it's validity and everything is fine so far.

setup is like this:


"name": "Angular2Boilerplate",
"version": "0.1.0",
"description": "Angular2Boilerplate",
"main": "index.js",
"scripts": {
"test": "gulp test"
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.5",
"angular2-localstorage": "^0.3.0",

"systemjs": "0.19.27",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"primeng": "^1.0.0-beta.8",
"primeui": "^4.1.12"
"devDependencies": {
"browser-sync": "^2.10.0",
"del": "^2.2.0",
"gulp": "^3.8.11",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-debug": "^2.0.1",
"gulp-inject": "^1.2.0",
"gulp-rimraf": "^0.1.1",
"gulp-sass": "^2.1.1",
"gulp-sass-glob-import": "^0.1.0",
"gulp-sourcemaps": "^1.5.1",
"gulp-tslint": "^1.4.4",
"gulp-typescript": "^2.5.0",
"gulp-uglify": "^1.5.1",
"superstatic": "^3.0.0",
"typescript": "^1.8.10"
"keywords": [
"author": "André Kirchner",
"license": "MIT"

Tried everything I could imagine to trace down the problem but now I need your help. Does Anyone have an idea what's goig so terribly wrong?

Answer Source

You are missing selector field in your TestComponent and you need to use that component in your index.html because it is the one you are bootstraping. I just tested it in my project, when I remove <my-app>Loading...</my-app> from index.html, I get exactly the same error:

<code>EXCEPTION: The selector "my-app" did not match any elements</code>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download