Webpack with typescript external commonjs module

Question

In order for my code below to work, I need to either repeat the require('./rolesService') clause in rolesView.ts , or uncomment the console.log statement. If I have neither of those lines, webpack does not include the referenced rolesService.ts in the bundle, resulting in a missing RolesServiceProvider error. I think I know why, since rs is not really used, except for type references that disappear once transpiled to es5, so webpack must be optimizing the import away. Is there a way to not have to repeat the require('./rolesService') twice.

rolesView.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
});

rolesService.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);

James Brantly James Brantly · Accepted Answer · 2016-01-07T15:19:41

I think I know why, since rs is not really used, except for type references that disappear once transpiled to es5, so webpack must be optimizing the import away.

You are correct. If only type information is used then TypeScript will strip the import.

The available "fixes" are:

What you have: require('./rolesService');
"Use" the import: rs;

FWIW, Angular2 seems to solve this with an @Inject directive that actually uses the import.

Webpack with typescript external commonjs module

1 Answers