这是我的第一个Angular2项目，另一个设置构建脚本的开发人员正在度假，我很难理解发生了什么。
我正在构建一个使用angular2 / http的应用程序，http模块在应用程序中按预期工作，但不用于测试。我正在尝试配置Karma / Jasmine进行一些单元测试，但是我收到以下错误，导致我无法为使用angular2 / http的任何组件编写测试。
警告在./src/app/services/auth/auth.service.spec.ts模块构建 失败：错误：无法解析模块＆＃39; angular2 / http＆＃39;在 /应用程序/ MAMP / htdocs中/ AMEX /连接门户壳/ src目录/主/资源/ src目录/应用/服务/ AUTH 在/Applications/MAMP/htdocs/AMEX/connect-portal-shell/src/main/resources/src/app/services/auth/auth.service.spec.ts中需要 在ResolutionError.Error（native） 在新的ResolutionError（/Applications/MAMP/htdocs/AMEX/connect-portal-shell/src/main/resources/node_modules/awesome-typescript-loader/dist.babel/deps.js:515:88） at /Applications/MAMP/htdocs/AMEX/connect-portal-shell/src/main/resources/node_modules/awesome-typescript-loader/dist.babel/deps.js:340:37 在运行时（/Applications/MAMP/htdocs/AMEX/connect-portal-shell/src/main/resources/node_modules/core-js/modules/es6.promise.js:89:22） at /Applications/MAMP/htdocs/AMEX/connect-portal-shell/src/main/resources/node_modules/core-js/modules/es6.promise.js:102:28 在flush（/Applications/MAMP/htdocs/AMEX/connect-portal-shell/src/main/resources/node_modules/core-js/modules/_microtask.js:18:9） at nextTickCallbackWith0Args（node.js：420：9） at process._tickCallback（node.js：349：13）@。/ src .spec.ts
AUTH-service.ts：
import { Injectable } from '@angular/core';
import { Http, Headers } from 'angular2/http';
import { Router } from '@angular/router-deprecated';
import {Observable} from 'rxjs/Rx';
@Injectable()
export class AuthService {
private loggedIn = false;
private events = [];
constructor(private http: Http, private router: Router){
// TODO check for token in local storage
this.loggedIn = false;
}
login(username, password, companyId){
console.log(this.http);
console.log('http request firing...');
let headers = new Headers();
headers.append('Content-Type','application/json');
return this.http
.post(
'/authenticate',
JSON.stringify({ username, password, companyId }),
{headers}
)
.subscribe(
res => {
this._login(res);
},
err => {
this._login(err);
}
)
}
private _login(res){
if(res.status === 200) {
this.loggedIn = true;
this.router.navigate(['My Trips']);
//TODO: store user information in UserService?
}
let resJson = res.json();
this.triggerEvent(res.status, resJson);
}
logout(){
// TODO remove token from local storage
this.loggedIn = false;
}
isLoggedIn(){
return this.loggedIn;
}
addEventListener(payload){
this.events.push(payload);
}
removeEventListener(payload) {
this.events.splice(this.events.indexOf(payload), 1);
}
triggerEvent(theEvent, payload = {}){
this.events.forEach( (evt) => {
evt(theEvent, payload);
});
}
}
AUTH-service.spec.ts：
import {
beforeEachProviders,
it,
describe,
expect,
inject
} from '@angular/core/testing';
import { Http, Headers } from 'angular2/http';
import { AuthService } from './auth.service';
describe('Auth Service', () => {
beforeEachProviders(() => [AuthService, Http]);
it('should ...',
inject([AuthService, Http], (service: AuthService, http: Http) => {
expect(service).toBeTruthy();
}));
});
SPEC-bundle.js：
Error.stackTraceLimit = Infinity;
require('core-js');
// Typescript emit helpers polyfill
require('ts-helpers');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
require('zone.js/dist/sync-test');
// RxJS
require('rxjs/Rx');
var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');
testing.setBaseTestProviders(
browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
);
Object.assign(global, testing);
var testContext = require.context('../src', true, /\.spec\.ts/);
function requireAll(requireContext) {
return requireContext.keys().map(requireContext);
}
// requires and returns all modules that match
var modules = requireAll(testContext);
果报conf.js：
/**
* @author: @AngularClass
*/
module.exports = function(config) {
var testWebpackConfig = require('./webpack.test.js');
config.set({
// base path that will be used to resolve all patterns (e.g. files, exclude)
basePath: '',
/*
* Frameworks to use
*
* available frameworks: https://npmjs.org/browse/keyword/karma-adapter
*/
frameworks: ['jasmine'],
// list of files to exclude
exclude: [ ],
/*
* list of files / patterns to load in the browser
*
* we are building the test environment in ./spec-bundle.js
*/
files: [ { pattern: './spec-bundle.js', watched: false } ],
/*
* preprocess matching files before serving them to the browser
* available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
*/
preprocessors: { './spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },
// Webpack Config at ./webpack.test.js
webpack: testWebpackConfig,
coverageReporter: {
dir : 'coverage/',
reporters: [
{ type: 'text-summary' },
{ type: 'json' },
{ type: 'html' }
]
},
// Webpack please don't spam the console when running in karma!
webpackServer: { noInfo: true },
/*
* test results reporter to use
*
* possible values: 'dots', 'progress'
* available reporters: https://npmjs.org/browse/keyword/karma-reporter
*/
reporters: [ 'mocha', 'coverage' ],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
/*
* level of logging
* possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
*/
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
/*
* start these browsers
* available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
*/
browsers: [
'Chrome',
'Firefox',
'PhantomJS'
],
/*
* Continuous Integration mode
* if true, Karma captures browsers, runs the tests and exits
*/
singleRun: true
});
};
的package.json：
{
"name": "connect-portal",
"version": "1.0.1",
"description": "Amex GBT CONNECT Portal app, built off of the Angular 2 Webpack Starter kit",
"scripts": {
"rimraf": "rimraf",
"tslint": "tslint",
"typedoc": "typedoc",
"typings": "typings",
"webpack": "webpack",
"webpack-dev-server": "webpack-dev-server",
"webdriver-manager": "webdriver-manager",
"protractor": "protractor",
"clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage dist",
"clean:dist": "npm run rimraf -- dist",
"preclean:install": "npm run clean",
"clean:install": "npm set progress=false && npm install",
"preclean:start": "npm run clean",
"clean:start": "npm start",
"watch": "npm run watch:dev",
"watch:dev": "npm run build:dev -- --watch",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:test": "npm run test -- --auto-watch --no-single-run",
"watch:prod": "npm run build:prod -- --watch",
"build": "npm run build:dev",
"prebuild:dev": "npm run clean:dist",
"build:dev": "webpack --config config/webpack.dev.js --progress --profile --colors --display-error-details --display-cached",
"prebuild:prod": "npm run clean:dist",
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --colors --display-error-details --display-cached --bail & npm run copyindex",
"copyindex": "copyfiles --up 1 static/*.html templates",
"server": "npm run server:dev",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
"server:dev:hmr": "npm run server:dev -- --hot",
"server:prod": "http-server dist --cors",
"webdriver:update": "npm run webdriver-manager update",
"webdriver:start": "npm run webdriver-manager start",
"lint": "npm run tslint 'src/**/*.ts'",
"pree2e": "npm run webdriver:update -- --standalone",
"e2e": "npm run protractor",
"e2e:live": "npm run e2e -- --elementExplorer",
"pretest": "npm run lint",
"test": "karma start",
"ci": "npm test && npm run e2e",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"start": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"postinstall": "npm run typings -- install",
"preversion": "npm test",
"version": "npm run build",
"postversion": "git push && git push --tags"
},
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/platform-server": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"copyfiles": "^0.2.1",
"core-js": "^2.4.0",
"ng2-translate": "^2.1.0",
"normalize.css": "^4.1.1",
"rxjs": "5.0.0-beta.6",
"zone.js": "~0.6.12"
},
"devDependencies": {
"@angularclass/angular2-beta-to-rc-alias": "~0.0.3",
"angular2-hmr": "~0.7.0",
"awesome-typescript-loader": "~0.17.0",
"codelyzer": "~0.0.19",
"compression-webpack-plugin": "^0.3.1",
"copy-webpack-plugin": "^2.1.3",
"css-loader": "^0.23.1",
"es6-promise": "^3.1.2",
"es6-promise-loader": "^1.0.1",
"es6-shim": "^0.35.0",
"es7-reflect-metadata": "^1.6.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.17.0",
"http-server": "^0.9.0",
"imports-loader": "^0.6.5",
"istanbul-instrumenter-loader": "^0.2.0",
"json-loader": "^0.5.4",
"karma": "^0.13.22",
"karma-chrome-launcher": "^1.0.1",
"karma-coverage": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "1.7.0",
"node-sass": "^3.7.0",
"parse5": "^1.5.1",
"phantomjs-polyfill": "0.0.2",
"phantomjs-prebuilt": "^2.1.7",
"protractor": "^3.2.2",
"raw-loader": "0.5.1",
"remap-istanbul": "^0.6.3",
"rimraf": "^2.5.2",
"sass-loader": "^3.2.0",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.1",
"ts-helpers": "1.1.1",
"ts-node": "^0.7.3",
"tslint": "^3.7.1",
"tslint-loader": "^2.1.3",
"typedoc": "^0.3.12",
"typescript": "~1.8.9",
"typings": "~1.0.3",
"url-loader": "^0.5.7",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.12.0"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}
我对Angular相当新，但我确信这是一种依赖注入的问题。我试图更改要使用的服务＆＃39; @ angular / http＆＃39;但这会在webpack构建中创建大量其他错误，其中scss文件不再正确加载。
我试图找到类似问题的答案，但没有取得任何成功。如果我犯了一个菜鸟错误，我会提前道歉，毕竟我是菜鸟！任何帮助是极大的赞赏。