Angular5 Karma Jasmine2.8.0模板解析错误：无法绑定'images'到angular-image-slider

别担心，这个问题本质是测试模块的依赖配置和运行环境不一致导致的——你的应用模块（AppModule）已经正确配置了angular-image-slider的依赖，但Karma/Jasmine运行测试时，测试模块是独立的，默认只会包含你要测试的组件，所以得手动补全依赖。下面分三种常见情况给你解决方案：

情况1：angular-image-slider是第三方组件库的组件 #

如果这个滑块是从第三方npm包引入的，你需要在测试模块中导入它对应的NgModule。比如假设组件库导出的模块叫ImageSliderModule，修改你的测试文件：

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { YourComponent } from './your.component';
// 导入滑块组件所属的模块
import { ImageSliderModule } from 'angular-image-slider';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ YourComponent ],
      // 把模块添加到imports数组里
      imports: [ ImageSliderModule ]
    })
    .compileComponents();
  });

  // 你的测试用例...
});

情况2：angular-image-slider是你自己写的自定义组件 #

如果这是你项目内的自定义组件，要确保测试模块中声明了这个组件，或者导入了包含它的模块：

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { YourComponent } from './your.component';
// 导入你的自定义滑块组件
import { AngularImageSliderComponent } from './angular-image-slider.component';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ 
        YourComponent,
        // 声明滑块组件
        AngularImageSliderComponent 
      ]
    })
    .compileComponents();
  });

  // 你的测试用例...
});

情况3：angular-image-slider是Web组件（自定义元素） #

如果它是标准的Web组件（不是Angular组件），那就在测试模块的schemas中添加CUSTOM_ELEMENTS_SCHEMA来告诉Angular忽略未知元素的属性检查：

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { YourComponent } from './your.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ YourComponent ],
      // 添加这个schema
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
  });

  // 你的测试用例...
});

简单说，核心就是让测试模块和你的应用模块一样，能识别angular-image-slider这个组件及其images输入属性，这样测试时就不会报解析错误啦。

内容的提问来源于stack exchange，提问作者Arka Bhattacharjee