<app-root> is empty and not getting filled

I am a beginner in angular and I am trying to make a blog application. However, whenever I run ng serve and look into the developer tools, I see that app-root is empty. (Tell me if I need to include more files)

I am also getting this error:

Error: NullInjectorError: No provider for Compiler!


ALSO: this is not a duplicate of this, I have tried the solutions but they don't apply to my senario

app.modules.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireAuthModule, USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/auth';
import { AngularFirestoreModule, USE_EMULATOR as USE_FIRESTORE_EMULATOR } from '@angular/fire/firestore';
import { AngularFireFunctionsModule, USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from '@angular/fire/functions';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { TimelineComponent } from './timeline/timeline.component';
import { articleComponent } from './article/article.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
declarations: [
TimelineComponent,
// CoursesCardListComponent,
articleComponent,
],
imports: [
AppRoutingModule,
HttpClientModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
AngularFireStorageModule,
AngularFireAuthModule,
AngularFireFunctionsModule
],
bootstrap: [AppComponent]
})
export class AppModule { }


app.component.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { Router } from '@angular/router';
import { appservice } from './services/services';
import { Entrys } from './model/entrys';


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

constructor(
private router: Router,
private appService: appservice) { }

ngOnInit() {

this.reloadArticles();

}

articles$: Observable<Entrys[]>

public show: boolean = true;

clicked() {
this.show = false;
}


reloadArticles() {
this.articles$ = this.appService.loadAllArticles()
}

}


index.html is just your normal angular project

Continue reading...