Angularjs 因果报应/茉莉花无法解析模块'；angular2/http'；

这是我的第一个Angular2项目，另一个设置构建脚本的开发人员正在休假，我很难理解到底发生了什么

我正在构建一个使用angular2/http的应用程序，http模块在该应用程序中按预期工作，但不用于测试。我试图配置Karma/Jasmine进行一些单元测试，但我收到以下错误，这使我无法为任何使用angular2/http的组件编写测试

./src/app/services/auth/auth.service.spec.ts模块生成中出现警告 失败：错误：无法解析中的模块“angular2/http” /Applications/MAMP/htdocs/AMEX/connectportalshell/src/main/resources/src/app/services/auth 在/Applications/MAMP/htdocs/AMEX/connect portal shell/src/main/resources/src/app/services/auth/auth.service.spec.ts中需要 解决方案错误时出错（本机） 在新的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/connectportalshell/src/main/resources/node_modules/awesome typescript loader/dist.babel/deps.js:340:37 运行时（/Applications/MAMP/htdocs/AMEX/connectportalshell/src/main/resources/node_modules/core js/modules/es6.promise.js:89:22） at/Applications/MAMP/htdocs/AMEX/connectportalshell/src/main/resources/node_modules/core js/modules/es6.promise.js:102:28 刷新时（/Applications/MAMP/htdocs/AMEX/connectportalshell/src/main/resources/node_modules/core js/modules/_microtask.js:18:9） 在下一个TTickCallbackwith0args（node.js:420:9） 在进程中。_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);

karma-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还相当陌生，但我确信这是一个以某种形式进行依赖注入的问题。我尝试将服务更改为使用“@angular/http”，但这会在网页包构建中产生大量其他错误，其中scss文件不再正确加载

---

我曾试图找到一个类似问题的答案，但没有成功。如果我犯了新手错误，我会提前道歉，毕竟我是新手！非常感谢您的帮助

也许

从'@angular/Http'导入{Http，Headers}

相反，

angular2/http

@yurzui我尝试过，它在构建过程中破坏了一堆其他东西：

错误在./src/scss/style.scss模块解析失败：/Applications/MAMP/htdocs/AMEX/connect portal shell/src/main/resources/src/scss/style.scss意外字符'@'（1:0）您可能需要适当的加载程序来处理此文件类型。SyntaxError:意外字符'@'（1:0）

，然后没有加载任何其他测试文件。使用“angular2/http”可以加载所有其他test.spec文件。您是否在

webpack.test.js

中设置了

sass加载程序？@yurzui是的，我尝试了，但它只会产生越来越多的问题。理想情况下，我希望继续使用“angular2/http”，因为应用程序本身使用该模块运行良好。我认为问题在于测试配置。您是否知道为测试定义依赖项的特定位置与常规应用程序构建不同？可能是从“@angular/Http”导入“{Http，Headers}”

相反，

angular2/http

@yurzui我尝试过，它在构建过程中破坏了一堆其他东西：

错误在./src/scss/style.scss模块解析失败：/Applications/MAMP/htdocs/AMEX/connect portal shell/src/main/resources/src/scss/style.scss意外字符'@'（1:0）您可能需要适当的加载程序来处理此文件类型。SyntaxError:意外字符'@'（1:0）

，然后没有加载任何其他测试文件。使用“angular2/http”可以加载所有其他test.spec文件。您是否在

webpack.test.js

中设置了

sass加载程序？@yurzui是的，我尝试了，但它只会产生越来越多的问题。理想情况下，我希望继续使用“angular2/http”，因为应用程序本身使用该模块运行良好。我认为问题在于测试配置。您是否知道为测试定义依赖项的特定位置与常规应用程序构建不同？