未捕获错误:意外值' SearchserviceModule'由模块' AppModule'声明。请添加@ Pipe / @ Directive / @ Component注释

时间:2018-04-02 16:18:22

标签: angular

我在这一点上遇到了这个错误,希望有些专家可以帮助我解决这个问题。在我添加搜索栏之前,我的网站运行正常(只是一个小项目,用于了解更多关于角度)我不知道有什么问题,因为我确实试图搜索我的app.module错误但我看不到。

干杯!

  

未捕获错误:意外值' SearchserviceModule'由模块' AppModule'声明。请添加@ Pipe / @ Directive / @ Component annotation

**My app.module.ts looks like this**



enter code here

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';


import { AppComponent } from './app.component';
import { MovielistComponent } from './movielist/movielist.component';
import { SearchserviceModule } from './searchservice/searchservice.module';

@NgModule({
  declarations: [
    AppComponent,
    MovielistComponent,
    SearchserviceModule,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      {
      path: 'movielist',
      component: MovielistComponent
      },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }




**My app.component.ts looks like this** 

import { Component } from '@angular/core';
import { Http, Response} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import  'rxjs/add/operator/map';
import { SearchserviceModule } from './searchservice/searchservice.module';
import { Subject } from 'rxjs/Subject';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [SearchserviceModule]
})
export class AppComponent {
  results: Object;
  searchTerm$ = new Subject<string>();

  constructor(private searchService: SearchserviceModule) {
    this.searchService.search(this.searchTerm$)
      .subscribe(results => {
        this.results = results.results;
      });
  }
}


**My searchservice.module.ts looks like this** 

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@Injectable()
export class SearchserviceModule {
  baseUrl: string = 'https://api.cdnjs.com/libraries';
  queryUrl: string = '?search=';

  constructor(private http: Http) { }

  search(terms: Observable<string>) {
    return terms.debounceTime(400)
      .distinctUntilChanged()
      .switchMap(term => this.searchEntries(term));
  }

  searchEntries(term) {
    return this.http
        .get(this.baseUrl + this.queryUrl + term)
        .map(res => res.json());
  }
}

1 个答案:

答案 0 :(得分:2)

将SearchserviceModule添加到不要声明的提供者:

@NgModule({
declarations: [
 AppComponent,
 MovielistComponent

],
imports: [
 BrowserModule,
 FormsModule,
 HttpModule,
 RouterModule.forRoot([
   {
   path: 'movielist',
   component: MovielistComponent
   },
])
],
providers: [SearchserviceModule],
bootstrap: [AppComponent]
})
 export class AppModule { }