<app-root> 是空的并且没有被填满

Question

我是角度初学者，我正在尝试制作一个博客应用程序。但是，每当我运行 ngserve 并查看开发人员工具时，我都会看到 app-root 是空的。 （告诉我是否需要包含更多文件）

我也收到此错误：

Error: NullInjectorError: No provider for Compiler!

另外：这不是this的重复，我已经尝试过这些解决方案，但它们不适用于我的情况

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 只是你正常的角度项目

Answer 1

好吧，我无法访问要重现的代码，也无法访问错误堆栈跟踪，所以我将尝试用我所拥有的解决问题。因此，我会尽力为您提供一些简单的检查步骤

1. 创建应用程序后立即运行开发服务器：

   ng new my app

   ng serve

如果运行没有问题，那么您就知道您的 Angular CLI 工作正常，您可以丢弃来自 CLI 问题的错误

2. 尝试使用提供的原理图生成所有组件/服务/管道/等。

手动声明元素是可以的，但是你不能忘记以正确的方式提供它们。另一方面，在使用像

ng g c cmpName

这样的原理图时，CLI 会负责提供所有必需的内容。

测试应用程序在添加新原理图后是否仍然运行非常重要。

3. 检查应用程序在添加库后是否停止执行。

我可以看到您已经添加了

@angular/fire

，所以也许您必须在将此库添加到您的项目之前和之后检查应用程序是否运行，因为如果您外包代码（例如使用服务处理身份验证时的示例）

4. 此时，对我来说最重要的部分是知道错误从哪里开始，以便了解导致错误的原因，因此我会检查之前的提交以尝试查找应用程序损坏的位置。一旦找到导致错误的原因，您就可以专注于更具体的解决方案。

5. 尝试查看提供的错误堆栈。 我知道 Angular 并不能准确地给出最佳的错误堆栈跟踪，但有时您会发现它非常有用，因此一个好方法是尝试检查错误来自何处。特别是堆栈的初始层会产生有价值的信息来查找错误。

最终推荐： 我非常确定注入问题是由于在没有正确提供的情况下使用库上的资源引起的。我自己也遇到过类似的问题，但我不会在这里添加更多内容，以免偏离问题。然后尝试检测：

• 错误开始时
• 错误从何而来
• 什么操作导致您的应用程序崩溃。

正如我所说。之后您可以专注于更具体的解决方案 希望你尽快找到它。

Answer 2

您需要在

AppComponent

数组中添加

declarations

，否则对于您的应用程序来说就像“不存在”：

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

Answer 3

我的问题是我缺少默认路由重定向