错误:选择器""与任何元素都不匹配

Question

我在下面的角度2中添加路由是我的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 { }

以下是我的主页,它位于页面目录中.

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

但我得到低于错误,

未处理的Promise rejection:错误:0:0引起:选择器"home"与任何元素都不匹配; 区域:; 任务:Promise.then; 值:ViewWrappedError {__zone_symbol__error:错误:错误:0:0引起:选择器"home"与ViewWrappedErr中的任何元素都不匹配...,_ nativeError:ZoneAwareError,originalError:ZoneAwareError,context:DebugContext,__ zone_symbol__stack:"错误:错误:0:0引起:选择器"home ... st:3000/node_modules/zone.js/dist/zone.js:241:32""...}错误:错误:0:0引起:选择器"home "与任何元素都不匹配

任何帮助都将得到帮助.

Answer 1

假设你AppComponent是你的shell组件,只有它应该被引导.取出Home并Dashboard从bootstrap阵列,让你@NgModule看起来像这样:

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