CODEWITHSUNDEEP
javascripthtmlangulartypescript
Romo
Romo

Reputation: 65

Angular: my app.component.html is not injecting into index.html <app-root>

This is my first Angular project, and I'm hoping to get some help with some simple data I'm trying to display.

I have a component (AuthorsComponent) that is referenced in my app.modules.ts file in the declarations property and imported into the file. In the modules file, I am also instantiating an AuthorsService class in the providers property to then inject into my AuthorsComponent constructor as a dependency.

// app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthorsComponent } from './authors/authors.component';
import { AuthorsService } from './authors.service';

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

// authors.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthorsService {

  getAuthors() {
    return ["author1", "author2", "author3"];
  }
}

I use the dependency to invoke a bunk data service array and set it to the authors property in the AuthorsComponent class.

// authors.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthorsService } from '../authors.service';

@Component({
  selector: 'authors',
  templateUrl: './authors.component.html',
  styleUrls: ['./authors.component.css']
})
export class AuthorsComponent implements OnInit {
  authors;

  constructor(service: AuthorsService) {
    this.authors = service.getAuthors();
  }

  ngOnInit(): void {
  }

}

The 'selected' html contains a simple header and a <ul><li></li></ul>. In my <li> I use a *ngFor directive to map? the authors array of strings to the list items.

<h2>{{ authors.length }} Authors</h2>
<ul>
  <li *ngFor="let author of authors">
    {{ author }}
  </li>
</ul>

In the app component I declare a header, which doesn't even load, and my custom component <authors>.

<h1>Angular</h1>
<authors></authors>

Really, this is probably more info than anyone needs, as I cant even get the header <h1>Angular</h1> to render from app.component.html. However, I think it shows that I've done quite a bit of sifting through docs and understanding Angular at a high level (Watch it still be a simple mistake!) Here's the app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

and finally, index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HelloWorld</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

To recap, there is something preventing my index.html <app-root> from receiving my app.component.html. If anyone can spot what might be causing this, it would be greatly appreciated. Thank you for your time!

Upvotes: 1

Views: 4236

Answers (1)

DeborahK
DeborahK

Reputation: 60518

I just put all of the above code into a Stackblitz and it worked fine.

Check it out here: https://stackblitz.com/edit/angular-simple-app-deborahk

Is it possible the issue is somewhere else in the code?

A few suggestions (though none of these should prevent at least your header from appearing)

Remove this from your module:

  providers: [
    AuthorsService
  ],

With the current version of Angular, you should be registering your service using the @Injectable decorator, which you are also doing.

Also, the common pattern for injecting and calling services in a component looks more like this:

  authors: string[] = [];

  constructor(private service: AuthorsService) { }

  ngOnInit(): void {
    this.authors = this.service.getAuthors();
  }
  • It's a good idea to strongly type your data.
  • Using an accessor keyword (such as private) will create a class-level service variable you can access anywhere in the class.
  • Load your data in ngOnInit instead of the constructor.

Upvotes: 1

Related Questions