我和我的团队最近开始使用angular-cli 1.1.1(棱角分明4.1.3)构建一个项目,我们将angular.io的英雄之旅中的 in-memory-web-api结合起来模拟http调用,直到我们的api构建完毕.我能够使用chrome成功通过我们所有的业力单元测试,但由于CI限制想要尝试使用PhantomJS运行业力.从chrome切换到phantomJS时,一些测试无法指定错误消息：

PhantomJS 2.1.1 (Mac OS X 0.0.0) UserDataService should be created Failed
    ReferenceError: Can't find variable: Headers in http://localhost:9876/_karma_webpack_/main.bundle.js (line 693)

这是我的user-data.service.ts文件的样子：

import {Injectable} from @angular/core";
import {Http} from "@angular/http";
import "rxjs/add/operator/map";
import "rxjs/add/operator/catch";
import "rxjs/add/operator/toPromise";
import "rxjs/add/operator/find";
import {User} from "../data-objects/user";
import {Observable} from "rxjs/Observable";

@Injectable()
export class UserDataService {
  private userDataUrl = `api/userData`;
  private headers = new Headers({"Content-Type": "application/json"});
  constructor(private http: Http) { }

  getUser(id:number): Observable<User> {
    const url = `${this.userDataUrl}/?id=${id}`;
   return this.http.get(url,this.headers)
      .map(response => {
        return  response.json().data as User;
      })
      .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error("An error occurred in the user data service.",error);
    return Promise.reject(error.json().error || "Server Error in UserDataServer")
  }
}

我已经尝试在网上搜索解决方案,但到目前为止还没有弄清楚为什么phantomJS找不到标题但铬可以.为了完整起见,这里分别是我的karma.conf.js和user-data.service.spec.ts文件.任何帮助,将不胜感激.

karma.conf.js

module.exports = function (config) {
  config.set({
    basePath: '',frameworks: ['jasmine','@angular/cli'],plugins: [
      require('karma-jasmine'),require('karma-chrome-launcher'),require('karma-phantomjs-launcher'),require('karma-jasmine-html-reporter'),require('karma-coverage-istanbul-reporter'),require('@angular/cli/plugins/karma')
    ],client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },files: [
      { pattern: './src/test.ts',watched: false },{ pattern: 'node_modules/angular-in-memory-web-api/**/*.js',included: false,watched: false }
    ],preprocessors: {
      './src/test.ts': ['@angular/cli']
    },mime: {
      'text/x-typescript': ['ts','tsx']
    },coverageIstanbulReporter: {
      reports: [ 'html','lcovonly' ],fixWebpackSourcePaths: true
    },angularCli: {
      config: './angular-cli.json',environment: 'dev'
    },reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress','coverage-istanbul']
              : ['progress','kjhtml'],port: 9876,colors: true,logLevel: config.LOG_DEBUG,autoWatch: true,// browsers: ['ChromeHeadless'],browsers: ['PhantomJS'],// browsers: ['Chrome'],singleRun: false
  });
};

用户data.service.spec.ts：

import {Testbed,inject} from '@angular/core/testing';

import {UserDataService} from './user-data.service';
import {Http,BaseRequestOptions} from "@angular/http";
import {MockBackend} from "@angular/http/testing";


describe('UserDataService',() => {
  beforeEach(() => {
    Testbed.configureTestingModule({
      providers: [UserDataService,MockBackend,BaseRequestOptions,{provide: Http}]
    });
  });

  fit('should be created',inject([UserDataService],(service: UserDataService) => {
    expect(service).toBeTruthy();
  }));
});

在通过发生错误的main.bundle.js文件后,我找到了答案.使用intellij为我管理导入,我意识到Headers是从lib.es6.d.ts而不是@ angular / http中引入的.一旦我从角度包含了Headers导入我在phantomJS中失败的所有测试开始传递.

这个问题让我很难过.请帮忙.
我有以下文件结构：

node_modules
    protractor
    typescript
package.json
register-popup.ts

package.json的内容

{
    "name": "typescriptProba","version": "1.0.0","description": "","main": "index.js","scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },"keywords": [],"author": "","license": "ISC","dependencies": {
         "protractor": "^4.0.11","typescript": "^2.0.10"
    }
}

register-popup.ts的内容：

import { ElementFinder,element,by } from "protractor";

export class RegisterPopup {
    public registerWithFacebookButton: ElementFinder = element(by.css('li.facebook a'));
    public registerWithGoogleButton: ElementFinder = element(by.css('li.google a'));
    public registerWithEmailButton: ElementFinder = element(by.css('li.email a'));
    public registerWithMobileButton: ElementFinder = element(by.css('li.natel a'));

    constructor () {}

    openPopup() {
        element(by.css('.account.user')).click();
        element(by.id('openRegister')).click();
    }

    openRegisterByEmailPopup() {
        this.registerWithEmailButton.click();
    }

    openRegisterByPhonePopup() {
        this.registerWithMobileButton.click();
    }
}

为了将ts文件编译为js文件,我使用以下命令：

./node_modules/typescript/bin/tsc "./register-popup.ts" --module commonjs --noresolve --traceResolution

执行命令后,我有以下错误：

error TS2307: Cannot find module 'protractor'.

但我的模块跟踪分辨率是这样的：

======== Resolving module 'protractor' from '/Users/predraglazarevic/www/typescriptProba/register-popup.ts'. ========
Module resolution kind is not specified,using 'NodeJs'.
Loading module 'protractor' from 'node_modules' folder.
File '/Users/predraglazarevic/www/typescriptProba/node_modules/protractor.ts' does not exist.
File '/Users/predraglazarevic/www/typescriptProba/node_modules/protractor.tsx' does not exist.
File '/Users/predraglazarevic/www/typescriptProba/node_modules/protractor.d.ts' does not exist.
Found 'package.json' at '/Users/predraglazarevic/www/typescriptProba/node_modules/protractor/package.json'.
'package.json' has 'typings' field 'built/index.d.ts' that references '/Users/predraglazarevic/www/typescriptProba/node_modules/protractor/built/index.d.ts'.
File '/Users/predraglazarevic/www/typescriptProba/node_modules/protractor/built/index.d.ts' exist - use it as a name resolution result.
Resolving real path for '/Users/predraglazarevic/www/typescriptProba/node_modules/protractor/built/index.d.ts',result '/Users/predraglazarevic/www/typescriptProba/node_modules/protractor/built/index.d.ts'
======== Module name 'protractor' was successfully resolved to '/Users/predraglazarevic/www/typescriptProba/node_modules/protractor/built/index.d.ts'. ========

所以我有

Module name ‘protractor’ was successfully resolved

但仍然有错误

error TS2307: Cannot find module ‘protractor’.

为什么？

回答

当我省略–noresolve标志时,它正在工作.所以命令应该是

./node_modules/typescript/bin/tsc "./register-popup.ts" --module commonjs

首先,您需要检查tsconfig.json,您会看到typeRoots

{
  "compileOnSave": false,"compilerOptions": {
    "declaration": false,"emitDecoratorMetadata": true,"experimentalDecorators": true,"lib": [
      "es2016"
    ],"module": "commonjs","moduleResolution": "node","outDir": "path/to/transpiled/files","sourceMap": true,"target": "es6","typeRoots": [
      "node_modules/@types"
    ]
  }
}

如果您有任何其他DefinitelyTyped模块,它们将被本地路径中的typeRoots目录选取：node_modules / @ types.