htmlangulartypescriptweb

simple Angular Component not showing up


So I follow a simple YouTube beginner Tutorial for Angular. At the start of this Tutorial it explains how to use components and I understand everything and it makes sense, but no matter what I do the component does not show up. The code looks like this with:

app.component.html being:

<app-header></app-header>

app.module.ts being:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

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

header.component.html being:

<header> Test </header>

and header.component.ts being:

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {

}

I have no Idea why, but the header Component is not showing up if I load app.component.html. If I write normal code in app.component.html it shows up, but with this code I just get an empty side. There is also no error.

Also no other person has any Problems with this in the comments so I guess I made a mistake, but where?

I apologize for my english, I am not a native speaker and thank you in advance for your help.


Solution

  • I just found a solution for my problem: I needed to open my file in my Terminal via

    ng serve --open
    

    in the Terminal. Before that I tried to open the file via explorer, which never worked. As I said I am really new to this kind of programming and I have no Idea why it only works this way. So if someone could explain it to me I would be very grateful.