As I was upgrading my angular2 project to RC5, a major issue surfaced. Despite reducing all the code to its minimum in order to debug the problem, I couldn't pinpoint its origin. Every request made by my app led to the following error message (as seen in the Developer console in the browser):
EXCEPTION: Error in ./e class e_Host - inline template 0:0
ORIGINAL EXCEPTION: The selector "ng-component" did not match any elements
Here is the simplified version of my code, which I believe is as basic as it gets:
main.ts
///<reference path="../node_modules/typescript/lib/lib.es6.d.ts"/>
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AdminModule } from './component/admin/admin.module';
platformBrowserDynamic().bootstrapModule(AdminModule);
admin.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {TestComponent} from '../admin/test/test';
@NgModule({
declarations: [TestComponent],
providers: [],
imports: [BrowserModule],
bootstrap: [TestComponent],
})
export class AdminModule {
}
test.ts
import {Component} from '@angular/core';
@Component({
//templateUrl : 'public/component/admin/test/test.html',
template: '<h1>Hello World!</h1>',
directives: []
})
export class TestComponent {}
I have double and triple checked every path and include for validity and everything appears to be fine so far.
This is how my npm setup looks like:
package.json
{
"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": [
"angular2",
"typescript",
"sass",
"gulp"
],
"author": "André Kirchner",
"license": "MIT"
}
I've tried everything possible to track down the issue, but now I'm reaching out for your assistance. Does anyone have an idea of what might be going wrong?