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.

Answer 1

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 ]
})