Question

版本

typescript: 2.1.4
systemjs: 0.19.41
angular: 1.5.10
angular-mocks: 1.5.10

问题

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

如果我使用以下它可以工作，但我收到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 config

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的完整角度对象。

import * as angular 'angular-mocks';

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

    beforeEach(module('someModule'));

    ...
});

请注意在exports: 'angular'元数据中添加angular-mocks，以便正确导入整个角度对象：

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不会导出任何内容。它增强了角度物体。

这是宣言的样子。请注意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

Answer 2

我不确定是否遇到相同的问题，但是在试图找到解决问题的方法时，谷歌将我带到了这里几次。因此希望这对某人有帮助。

如果您正在制作混合角度应用程序，并且正在编写第一个类似于

的测试

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

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

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

});

您会收到错误消息

ERROR in something.spec.ts
Module not found: Error: Can't resolve 'angular' in ...

或

ERROR in something.spec.ts
Module not found: Error: Can't resolve 'angular-mocks' in ...

然后，您可能要检查是否已安装角度和角球。

我是通过karma.conf引用它们的，但是我发现如果我分别在package.json和dependencies下的devDependencies中声明它们，则测试开始通过。

Answer 3

我也遇到了这个问题，最终是因为在我的 TS 配置中启用了 esModuleInterop。为了解决该问题，您可以将单元测试中的角度导入更改为 import angular from 'angular' 或禁用该标志（但这会破坏将 Lodash 导入为 import _ from 'lodash'）

什么是导入角度模拟的正确方法

3 个答案: