Angular混合项目中ng test执行失败问题求助

问题根源 #

从报错信息和代码来看，ng test失败的核心原因有两个：

1. 文件名拼写错误：
   组件类为GgadminComponent，实际模板/样式文件名为ggadmin.component.html、ggadmin.component.css，但你在@Component装饰器里写的是cpgadmin.component.html和cpgadmin.component.css，文件名完全不匹配。

2. 路径错误：
   所有文件都位于同一目录src/app/ui/admin下，不需要添加ui/admin/前缀，应该使用相对当前文件的路径直接引用文件名。

另外，Windows系统对文件名大小写不敏感，这也是grunt serve和grunt test能正常运行的原因，但Angular CLI的测试环境会严格校验文件名和路径，因此暴露了问题。

解决方案 #

1. 修正组件的模板和样式路径 #

修改Ggadmin.component.ts中的@Component配置：

@Component({
    selector: 'ggadmin',
    templateUrl: './ggadmin.component.html',
    styleUrls: ['./ggadmin.component.css']
})
export class GgadminComponent implements OnInit {
    // 组件逻辑...
}

2. 规范测试文件的描述（可选） #

测试文件中describe的名称写成了GadminComponent，和实际组件名GgadminComponent不符，虽然不影响运行，但建议修正以保持一致性：

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ GgadminComponent ],
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(GgadminComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

完成以上修改后，重新运行ng test即可解决文件找不到的问题。

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