带有 typescript 外部 commonjs 模块的 Webpack

为了使下面的代码正常工作，我需要重复require('./rolesService')中的条款rolesView.ts，或取消注释console.log陈述。如果我没有这两行，则 webpack 不会在捆绑包中包含引用的 RolesService.ts，从而导致缺少 RolesServiceProvider 错误。我想我知道为什么，因为rs并没有真正使用，除了一旦转换为 es5 就会消失的类型引用，因此 webpack 必须优化导入。有没有办法不必重复 require('./rolesService') 两次。

角色视图.ts：

"use strict";

import angular = require('angular');

import rs = require('./rolesService');

require('./rolesService');

//console.log( rs);

class RolesViewController {
    static $inject = ['RolesService']
    constructor(private rolesService: rs.IRolesService) {
        rolesService.getRoles();
    }
}

angular.module('epsr').component('rolesView', {
    template: require('./rolesView.html'),
    controller: RolesViewController
});

角色服务.ts：

'use strict';

import angular = require('angular');

export interface IRole {
    id: string;
    name: string;
}

export interface IRolesService {
    getRoles(): ng.IPromise<IRole[]>;
}

class RolesService implements RolesService {
    static $inject = ['$http'];
    constructor(private $http: ng.IHttpService) {
    }

    getRoles(): ng.IPromise<IRole[]> {
        return this.$http.get('api/roles');
    }
}

angular.module('epsr').service('RolesService', RolesService);

我想我知道为什么，因为 rs 并没有真正使用，除了类型引用一旦转换为 es5 就会消失，所以 webpack 必须优化导入。

你是对的。如果仅使用类型信息，则 TypeScript 将删除导入。

可用的“修复”是：

1. 你有什么：require('./rolesService');
2. “使用”导入：rs;

FWIW，Angular2 似乎通过实际使用导入的 @Inject 指令解决了这个问题。