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

CodePudding user response：

You need to add AppComponent in the declarations array, or else it's like it "does not exist" for your application:

...
declarations: [
  // Add it in this array:
  AppComponent,
  TimelineComponent,
  // CoursesCardListComponent,
  articleComponent,
],
...

CodePudding user response：

Ok, I have no access to the code to be reproduced, nor error stack trace, so I will try to solve the problem with what I have. For that reason I'll try to provide you some easy steps to be checked

1. Run the dev server right after create the application: ng new my app ng serve

If it run with no issues, then you know your Angular CLI works properly and you can discard the error coming from a CLI issue

2. Try to generate all your components/services/pipes/etc using the provided schematics.

It is fine to declare elements by hand, but then you can not forget to provide them in the right way. In the other hand, while using schematics likeng g c cmpName, the CLI takes care of all the required providing.

It is really important test the application to still running after adding a new schematic.

3. Check for the application to non stop executing after adding libraries.

I can see you have added @angular/fire, so maybe you must check the application to run after and before adding this library to your project, since the schematic by itself tends to not fully satisfy the providing requirements if you outsource the code (for example while using a service to handle authentication)

4. At this point, the most important part for me is to know where the error started, in order to understand what caused it, so I'd checkout to previous commit to try to find where the app broke. Once I find what caused the error, you can focus on more specific solutions.

5. Try to review the provided error stack. I know angular does not give precisely the best error stack traces, but you can find it very useful sometimes, so a good way is try to check where the error comes from. Particularly the initial layers of the stack result on valuable information to find the error.

Final recommendation: I'm pretty sure that the injection issue was caused for using a resource on a library without proper providing. I have experienced similar issues myself, but I won't add more here to not deviate from the question. Then try to detect:

• when the error started
• where the error comes from
• what action caused your app to break.

As I said. After this you can focus on more specific solutions Hope you find it soon.