TypeScript Compiler disables imported angular -translate module

Question

I am converting an Angular 1.5 project to TypeScript and angularTranslate import angularTranslate .

I am trying to import angular and angular-translate like this:

 import * as angular from "angular"; import * as angularTranslate from "angular-translate"; console.log(angular, angularTranslate); 

I am using the typing set 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 discarded the angularTranslate import, although it referenced it, and a similar angular import is preserved. This leads to a runtime error ReferenceError: angularTranslate is not defined . This works great with Babylon. How to import angularTranslate ?

Edit:

It also emits nothing:

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

But this emits the expected result:

 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 the angular -translate module exports the namespace. As a workaround, you can refer to the old version of angular -translate.d.ts or fork and fix it manually.

Answer 2

angular 1.5 does not support the modular structure of JS or UMD (it has its own modular system). Therefore, if you import something from "angular", you only import types from a specifically typed file from the declaration of the surrounding module, and the typescript transpiler can recognize that there is no need to issue a CommonJS import definition in reducible JS (only the declaration is imported). But in case you directly determine the import using the required CommonJS syntax (or using the ES6 import module), you create a side effect import that the angular script executes when the loading module or batch loads the required module.

Answer 3

// Import angular translate

 import angularTranslate from 'angular-translate'; 

then do not use quotation marks:

 var app = angular.module('myApp', [angularTranslate]);