16

I just started learning Angular yesterday so I apologize if I'm missing something obvious, but I am trying to display a component on the app.component.html, however, it is not showing up.

TS file for the component I am trying to display:

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));
    }
}
4
  • other things in app.component.html are showing? I've tested your code, i can see Find Images button
    – firegloves
    Jun 7, 2018 at 16:18
  • @firegloves other things do show up; however, as soon as I add the <image-list></image-list> tags, nothing is displayed Jun 7, 2018 at 18:02
  • please post your app.module.ts
    – firegloves
    Jun 7, 2018 at 19:29
  • @firegloves I added the code Jun 7, 2018 at 20:10

6 Answers 6

25

I had a similar problem trying to use a component outside its module. In this case, you have to export a component from your .module.ts:

@NgModule({
  // …
  declarations: [ MyComponent ],
  exports: [ MyComponent ],
  // …
})
0
2

You need to import your Component and your Service into your app.module.ts and then to declarations and to providers property

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

Adjust ImageListComponent path into the import statement.

Teorically when you generate a component with Angular CLI with a command like this:

ng generate component image-list

it should update your app.module.ts file for you.

To generate a service use

ng generate service image
5
  • 1
    Unfortunately, that did not work. However, I believe the issue must have to do with injecting image.service.ts into image-list.component.ts, as when I remove the injection from the constructor, the component loads. I have added the code for image.service.ts Jun 7, 2018 at 21:18
  • Have you generated image service with angular cli or manually?
    – firegloves
    Jun 7, 2018 at 21:34
  • Edited answer, if you will have other problems like that rename all of your ts classes, regenerate them with angular cli and then paste your old code into generated files
    – firegloves
    Jun 7, 2018 at 22:19
  • Unfortunately this solution is not working.! If anyone got solution please post it as answer. Nov 18, 2018 at 11:59
  • 2
    I just had the same problem, and I was doing the (stupid) mistake of putting the component outside the <app-root> in index.html.
    – Jeppe
    Mar 31, 2019 at 11:31
2

check this one

in src/app/app.module.ts

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

from this link: https://malcoded.com/posts/why-angular-not-works/

1
  • This is what worked for me! I didn't have the HttpClientModule in my imports but did have it in my service. Thanks! ETA: after I made this change, I had to run "npm cache verify" before it would work Nov 29, 2022 at 18:11
1

You may try the Angular tutorial from: https://angular.io/start . It shows how to render a custom Ansible component on the app.component.html page.

You just need to update the app.module.ts file. Assuming your component is named ImageListComponent:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'; // add this line

import { AppComponent } from './app.component';
import { ImageListComponent } from './image-list/image-list.component'; // add this line

@NgModule({
  declarations: [
    AppComponent,
    ImageListComponent // add this line
  ],
  imports: [
    BrowserModule,
    // add the following 3 lines
    RouterModule.forRoot([
      { path: '', component: ImageListComponent },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

First try this, without adding any custom services.

0

It seems you have nothing that triggers the API call on your method searchImages in ImageComponent. Having a click eventListener on the <button>Find Images</button> tag should do the trick. Also register the ImageComponent and ImageService in your app.module.ts file.

0

For me the issue was that I was getting errors in the html, precisely in angular-generated components and it didn't compile.

For example, I had a component which was inputting [data]="data" in the component, but as the data on the moment of passing was undefined(i.e. simply not fetched yet), it has resulted in an NPE, or TypeError: Can not read properties of undefined.

Check out if you have a) enforced the prefetched data you have with !, like data!:string. If yes - change it to data?:string, and fix wherever the problem appears with *ngIf somewhere above.

Good luck!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.