什麼是進口角嘲笑

Question

版本

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

問題

我試圖加載angular-mocks與正確的方法打字稿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進口全角度對象正確地分配給它。

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不出口任何東西。它增加了角度對象。

下面是它的聲明是怎樣的。請注意0​​屬性，該屬性被添加到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