Angular 运行时业力中的元素未知错误“；ng测试“；

当我运行时，我的项目运行良好

ng发球

但当我使用运行一个简单的“tobeTruthy（）”测试用例时，它显示了多个错误

ng试验

HTML文件

<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple">
  <p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>
<div *ngIf="isAuthenticated" class="container-fluid">
  <app-app-menu></app-app-menu>
  <router-outlet></router-outlet>
</div>

---

如何才能为应用程序模块实例成功运行测试用例？

开发人员经常被这一点弄糊涂。运行

ng test

时，karma和jasmine运行

.spec.ts

文件中定义的角度模块。它根本看不到您的正常代码。因此，无论您在app.module.ts中输入什么，都不会对您的测试模块产生任何影响。你可以做两件事

向测试模块添加

自定义元素\u模式

在
app.component.spec.ts中执行以下操作

这将解决您现在遇到的错误。然而，您可能会遇到其他人，正如我所看到的，您向

AppComponent

注入了一些服务，这让我们来看看您可以做的下一件事

在测试模块内导入

AppModule

您可以在

TestBed

中导入

AppModule

，如下所示。这样做的目的是确保您的测试始终具有所需的定义。如果您将另一个组件添加到

AppModule

并在

AppComponent

中使用，那么它也将在测试中可用。此外，您不需要添加

自定义元素\u模式

但是，您应该知道，这将导入并创建您在

app.component

中使用的任何第三方组件/服务。有人会说，这违背了单元测试的本质。您仍然可以以某种方式模拟这些服务，但它们将被呈现。此外，在角度应用中，当测试导入

RouterModule

的模块时，使用

RouterTestingModule

。在测试中使用

RouterModule

可能会弄乱测试，因为这些测试在无头浏览器上运行，

RouterModule

可能会导致URL更改

虽然正确，这意味着它有效地解决了问题，但请注意以下几点：

• 使用

  自定义元素\u模式

  或

  无错误\u模式

  可能会导致“错误吞咽”。如中所述，不要过度使用它们
• 导入

  AppModule

  意味着您正在编写集成测试。通常，最好编写一个独立的单元测试

---

因此，最好的解决方案是存根不需要的组件，如中所述。基本上，您将使用相同的选择器创建一个空组件。虽然如果您有很多组件，这可能会很乏味，但我相信这是目前的最佳做法。

您是否可以尝试运行

npm run prod build staging--verbose

。也许这会给你更多的细节，太棒了！但是，如果我不想导入整个appModule，并且我必须导入、声明并提供多个包或服务才能使其正常工作，我可以简单地将其添加到spec.ts文件中，就像我将添加到module.ts中一样？如果我在spec.ts中添加一些不在module.ts中的额外内容，它们会影响我运行“ng serve”时的项目大小或编译时间吗？我假设，当我运行“ng测试”时，它将明显生效。无论您在

spec

文件中做什么，都不会影响您的应用程序。此外，您可以在

spec

文件中导入所需的任何内容。如果您不想导入

AppModule

本身，我建议您模拟服务和组件，而不是导入实际的模块。

import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';

import { Store } from '@ngrx/store';
import { map } from 'rxjs/operators';

import { AppState } from './app.reducer';
import { UserState } from './core/store/core.state';
import * as CoreActions from './core/store/core.actions';
import { Globals } from './shared/globals';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  datetime = new Date();
  title = 'curemd-x';
  isAuthenticated = false;
  constructor(private store: Store<AppState>, private router: Router,
    private globals: Globals) {}
...
   ...

 "Failed: Template parse errors:
'ngx-spinner' is not a known element:
1. If 'ngx-spinner' is an Angular component, then verify that it is part of this module.
2. If 'ngx-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple">
  <p"): ng:///DynamicTestModule/AppComponent.html@0:0
'app-app-menu' is not a known element:
1. If 'app-app-menu' is an Angular component, then verify that it is part of this module.
2. If 'app-app-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ngx-spinner>
<div *ngIf="isAuthenticated" class="container-fluid">
  [ERROR ->]<app-app-menu></app-app-menu>
  <router-outlet></router-outlet>
</div>
"): ng:///DynamicTestModule/AppComponent.html@4:2

  declarations: [
    AppComponent,
    FirstOrDefaultPipe
  ],
  imports: [
    RouterModule,
    BrowserModule,
    HttpClientModule,
    PatientModule,
    StoreModule.forRoot(AppReducers),
    EffectsModule.forRoot([]),
    CoreModule,
    NgxSpinnerModule,
    BrowserAnimationsModule,
    DropDownsModule
  ],
  providers: [Globals],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

   TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
   }).compileComponents();

    TestBed.configureTestingModule({
      imports: [
        AppModule
      ],
    }).compileComponents();