2017-01-12 9 views
1

Версиичто правильный способ импорта углового издевается

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

Проблема

Я пытаюсь загрузить angular-mocks с systemjs в проекте типографии 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'] 
     } 
    } 
}); 

Вопрос

Любая идея, что правильный способ импортировать это?

Update

Это решение я сейчас использую, который импортирует полный угловой объект с 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'. 

ответ

6

правильный способ импорта 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

+0

Я чувствую, что я должен быть что-то отсутствует. Разве это не то же самое, что и мой код, кроме того, что 'angular.mockule' завернут в жирную стрелку? – james

+0

@james да, это единственная разница. Это означает, что проблема не в 'import', а в вашей ** Systemjs config **. Положите оператор 'debugger' перед вашим' beforeEach() 'и сравните' угловые' и 'window.angular', в соответствии с тем, что вы сказали (' window.angular.mock' определено, и вы получили 'Uncaught TypeError: Can not read property ' модуль «неопределенного»), они не совпадают. –

+0

Я не хочу быть грубым, но вы мне ничего не говорите, это еще не ясно объяснено в моем вопросе. Вы просто повторяете описание проблемы, которую пытаетесь решить. – james