angular テスト作成前エラー解決メモ

エラーメッセージと、解決方法をメモ

● Failed: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'.

テストクラスにReactiveFormsModuleを追加する。

sample

  import { ReactiveFormsModule } from '@angular/forms';

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [ xxxService ],
      declarations: [ xxxComponent ],
      imports: [ xxxModule, ReactiveFormsModule]
    })
    .compileComponents();
  }));

● Error: No provider for Http!

テストクラスにHttpではなく、HttpModuleを追加したら解決！

sample

import { HttpModule } from '@angular/http';

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [ xxxService ],
      declarations: [ xxxComponent ],
      imports: [ xxxModule, HttpModule ]
    })
    .compileComponents();
  }));

● Error: No provider for ActivatedRoute!

RouterTestingModuleを追加したら解決。

sample

import { RouterTestingModule } from "@angular/router/testing";

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [ xxxService ],
      declarations: [ xxxComponent ],
      imports: [ xxxModule, RouterTestingModule]
    })
    .compileComponents();
  }));

●Failed: Template parse errors:

'app-xxx' is not a known element:
1. If 'app-xxx' is an Angular component, then verify that it is part of this module.
2. If 'app-xxx' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]

そのコンポーネントを使用するテスト全部にCUSTOM_ELEMENTS_SCHEMAを追加したら解決

sample

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
      providers: [ xxxService ],
      declarations: [ xxxComponent ],
      imports: [ xxxModule, RouterTestingModule]
    })
    .compileComponents();
  }));

●Can't bind to 'ngModel' since it isn't a known property of 'select'

FormsModuleをインポートしたら解決

sample

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      ......
      imports: [ xxxModule, FormsModule]
    })
    .compileComponents();
  }));

参考
https://stackoverflow.com/questions/41019109/error-no-provider-for-router-while-writing-karma-jasmine-unit-test-cases
https://stackoverflow.com/questions/42656195/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-select