Error: The selector "" did not match any elements

Question

I am adding routing in angular 2 below is my app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent }  from './app.component';
import { Home } from './pages/pages';
import { Dashboard } from './pages/pages';
import {ValidationError} from './validators/validators';
import { AuthService } from './services/services';
import { RouterModule, Routes } from '@angular/router';
const appRoutes: Routes = [
  { path: 'home', component: Home },
];
@NgModule({
  imports:      [ BrowserModule , ReactiveFormsModule, RouterModule.forRoot(appRoutes) ],
  declarations: [ AppComponent , Home, Dashboard ],
  bootstrap:    [ AppComponent , Home, Dashboard ],
  providers:    [ ValidationError ]
})
export class AppModule { }

and below is my home page which resides in pages directory.

import {Component} from '@angular/core';
import { FormBuilder , FormGroup, Validators , FormControl} from '@angular/forms';
import 'rxjs/add/operator/debounceTime';
import {ValidationError} from '../../validators/validators';
@Component({
    selector: 'home',
    templateUrl: 'app/pages/home/home.component.html',
    styleUrls: ['app/pages/home/home.scss']
})
export class Home{
    serverError: any;
    bankAccount: FormGroup;
    constructor(private validationError: ValidationError , private formBuilder: FormBuilder){
        this.bankAccount = this.formBuilder.group({
            username: ['' , Validators.required]
        });
    };
    ngOnInit(){
        this.bankAccount.valueChanges.debounceTime(400).subscribe(data => this.validationError.populateErrorMessage(this.bankAccount));
    }
    login(){
        debugger
    }
}

But i am getting below error,

Unhandled Promise rejection: Error in :0:0 caused by: The selector "home" did not match any elements ; Zone: ; Task: Promise.then ; Value: ViewWrappedError {__zone_symbol__error: Error: Error in :0:0 caused by: The selector "home" did not match any elements at ViewWrappedErr…, _nativeError: ZoneAwareError, originalError: ZoneAwareError, context: DebugContext, __zone_symbol__stack: "Error: Error in :0:0 caused by: The selector "home…st:3000/node_modules/zone.js/dist/zone.js:241:32)"…} Error: Error in :0:0 caused by: The selector "home" did not match any elements

Any help will be apperciated.

Solution

Assuming your AppComponent is your shell component, only it should be bootstrapped. Remove Home and Dashboard from the bootstrap array, so your @NgModule looks like this:

@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule, RouterModule.forRoot(appRoutes) ],
  declarations: [ AppComponent, Home, Dashboard ],
  bootstrap:    [ AppComponent ],
  providers:    [ ValidationError ]
})