angular - 错误 : The selector "" did not match any elements

Question

我在下面的 Angular 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 { }

下面是我的主页，它位于 pages 目录中。

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

但是我遇到了以下错误，

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

我们将不胜感激任何帮助。

Answer 1

假设您的 AppComponent 是您的 shell 组件，只有它应该被引导。从 bootstrap 数组中删除 Home 和 Dashboard，所以你的 @NgModule 看起来像这样:

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