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

Question

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!

Do you have console error ? And did you check thanks to f12, if the element was here ? — Elikill58
– Elikill58, Commented Jul 23, 2021 at 22:17
@Elikill58, That's the unfortunate part, my console is clean, apart from the message: [WDS] Live Reloading enabled. When I inspect all I can see is the index.html elements. — Romo
– Romo, Commented Jul 23, 2021 at 22:19
Ah sorry, no errors or warnings there either. Just the live development server reference and a compiled successfully message (chunk files too). — Romo
– Romo, Commented Jul 23, 2021 at 22:24

DeborahK · Accepted Answer · 2021-07-23 22:38:10Z

1

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.

edited Jul 23, 2021 at 22:38

answered Jul 23, 2021 at 22:22

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Romo Over a year ago

Thank you so much for all your help! You were right, I forgot that I deleted code in the main.ts file to use as a sandbox the day prior. I rolled back the changes in that file and got it working. Can't believe I commited that file 🤦🏽‍♂️. Thank you again!!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related