TypeScript Compiler omits imported angular-translate module

Question

I'm converting an Angular 1.5 project to TypeScript and ran into a problem importing angularTranslate.

I try to import both angular and angular-translate like this:

import * as angular from "angular";
import * as angularTranslate from "angular-translate";

console.log(angular, angularTranslate);

I'm using typings installed from DefinitelyTyped/angular-translate.d.ts.

When I compile with TypeScript 1.8 (module: "commonjs") it emits this JavaScript:

"use strict";
var angular = require("angular");
console.log(angular, angularTranslate);

As you can see it has dropped the angularTranslate import even though it's referenced, and the similarly used angular import is preserved. This results in a runtime error ReferenceError: angularTranslate is not defined. This works fine with Babel. How should I import angularTranslate?

Edit:

This also emits nothing:

import angularTranslate = require("angular-translate");

But this emits the expected output:

let angularTranslate = require("angular-translate");

Is there something wrong with the angular-translate module that makes it impossible to use with import in TypeScript?

Answer 1

The problem is that "angular-translate" module exports a namespace. As a temporal solution you can reference old version of angular-translate.d.ts or fork and fix it manually.

Answer 2

angular 1.5 doesn't support module structure of JS nor UMD (it has his own module system). So if you import something from "angular" you are importing just types from definitly typed file from ambient module declaration and typescript transpiler is able to recognize that there is no need to emit CommonJS import definition to resulted JS (only declaration is imported). But in case that you directly define import by CommonJS required syntax (or by ES6 import "module") you create side-effect import which executes angular script when module loader or bundler loads required module.