Угловой 6 компонент не отображается

Question

Я только начал изучать Angular вчера, поэтому я извиняюсь, если упускаю что-то очевидное, но я пытаюсь отобразить компонент в app.component.html, но он не отображается.

Файл TS для компонента, который я пытаюсь отобразить:

import { Component, OnInit } from '@angular/core';
import { ImageService } from '../shared/image.service';

@Component({
  selector: 'image-list',
  templateUrl: './image-list.component.html',
  styleUrls: ['./image-list.component.css']
})
export class ImageListComponent implements OnInit {

  images: any[];

  constructor(private _imageService : ImageService ) { }

  searchImages(query : string)
  {
    return this._imageService.getImage(query).subscribe
    (
      data => console.log(data),
      error => console.log(error),
      () => console.log("Request Completed!")
    );
  }

  ngOnInit() {
  } 
}

image-list.component.html:

<button>Find Images</button>

app.component.html:

<image-list></image-list>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

image.service.ts

import { Injectable } from "@angular/core";
import { environment } from "../../environments/environment";
import { Http, Headers } from "@angular/http";
import { map, filter, scan } from 'rxjs/operators';

@Injectable()
export class ImageService
{
    private query: string;
    private API_KEY: string = environment.API_KEY;
    private API_URL: string = environment.API_URL;
    private URL: string = this.API_URL + this.API_KEY + '&q=';

    constructor(private _http: Http) {

    }

    getImage(query)
    {
        return this._http.get(this.URL + this.query).pipe(
            map((res) => res.json));
    }
}

Answer 1

У меня была похожая проблема при попытке использовать компонент вне его модуля.В этом случае вы должны экспортировать компонент из вашего .module.ts :

@NgModule({
    ...
    declarations: [ MyComponent ],
    exports: [ MyComponent ],
    ...
})

Answer 2

Вам необходимо импортировать ваш Компонент и ваш Сервис в ваш app.module.ts, а затем в объявления и свойство провайдеров

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ImageListComponent } from './image-list.component';
import { ImageService } from './image.service';

@NgModule({
  declarations: [
    AppComponent,
    ImageListComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [ ImageService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Настройте путь ImageListComponent в операторе импорта.

Теоретически, когда вы генерируете компонент с Angular CLI с помощью такой команды:

ng generate component image-list

, он должен обновить ваш файл app.module.ts для вас.

Для создания сервиса используйте

ng generate service image