angularjs - 导入 angular-mocks 的正确方法是什么

Question

版本
typescript: 2.1.4systemjs: 0.19.41angular: 1.5.10angular-mocks: 1.5.10
问题

我正在尝试加载 angular-mocks与 systemjs在 typescript 2.0 项目中。

如果我使用以下它可以工作，但我收到 TS 错误和 {module}在webstorm中也被标记为错误。

import {module} from 'angular-mocks';

describe('someClass', function () {
    'use strict';

    beforeEach(module('someModule'));

    ...
});

error TS2305: Module '"/node_modules/@types/angular-mocks/index"' has no exported member 'module'.
我最初试图简单地导入 angular-mocks ，但进口的 angular对象没有 mock属性(即使定义了 window.angular.mock)，因此它会引发错误。

import * as angular from 'angular';
import 'angular-mocks';

describe('someClass', function () {
    'use strict';

    beforeEach(angular.mock.module('someModule'));

    ...
});

Uncaught TypeError: Cannot read property 'module' of undefined
Systemjs 配置

System.config({
    transpiler: 'typescript',
    paths: {
        'src:*': '/src/*',
        'npm:*': '/node_modules/*'
    },
    map: {
        'angular': 'npm:angular/angular.js',
        'angular-mocks': 'npm:angular-mocks/angular-mocks.js',
        'lib': 'src:lib',
        'typescript': 'npm:typescript/lib/typescript.js',
        'systemjs': 'npm:systemjs/dist/system.src.js'
    },
    packages: {
        lib: {
            defaultExtension: 'js'
        }
    },
    meta: {
        angular: {
            format: 'global',
            exports: 'angular'
        },
        'angular-mocks': {
            format: 'global',
            deps: ['angular']
        }
    }
});

问题

知道导入它的正确方法是什么吗？

更新

这是我目前使用的解决方案，它使用 mock 导入完整的 Angular 对象正确分配给它。

import * as angular 'angular-mocks';

describe('someClass', function () {
    'use strict';

    beforeEach(module('someModule'));

    ...
});

注意添加 exports: 'angular'到 angular-mocks元，以便它正确导入整个 Angular 对象:

System.config({
    ...
    meta: {
        angular: {
            format: 'global',
            exports: 'angular'
        },
        'angular-mocks': {
            format: 'global',
            exports: 'angular',
            deps: ['angular']
        }
    }
}

这仍然会产生 TS 错误，但此时它是最短的错误，因此更容易与其他错误区分开来......

error TS2304: Cannot find name 'module'.

Answer 1

正确导入方式angular-mocks和 使用它 (关注 beforeEach()):

import * as angular from 'angular';
import 'angular-mocks';

describe('some component', () => {

    beforeEach(() => {
        angular.mock.module('someModule');
    });

});

是因为 angular-mocks不导出任何东西。它增强了 Angular 对象。

这是它的声明的样子。关注 mock属性，添加到 IAngularStatic界面。

import * as angular from 'angular';

///////////////////////////////////////////////////////////////////////////////
// ngMock module (angular-mocks.js)
///////////////////////////////////////////////////////////////////////////////

declare module 'angular' {

  ///////////////////////////////////////////////////////////////////////////
  // AngularStatic
  // We reopen it to add the MockStatic definition
  ///////////////////////////////////////////////////////////////////////////
  interface IAngularStatic {
    mock: IMockStatic;
  }

  ...

  interface IMockStatic {
    ...

    inject: IInjectStatic

    // see https://docs.angularjs.org/api/ngMock/function/angular.mock.module
    module: {
      (...modules: any[]): any;
      sharedInjector(): void;
    }

    ...
  }
  ...
}

完整声明: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/angular-mocks/index.d.ts