7

I have a page-a.ts which would compile into page-a.js:

alert('this is from page-a');

And I have a main.ts which compiles into main.js:

import pageA = module('page-a')
alert('this is from main');

And this is my tsc command line:

tsc --module amd page-a.ts main.ts

And I'm using requirejs like this:

<script src="require.js" data-main="main.js"></script>

I can't see the alert messagebox from page-a when loading the page. And in the generated scripts main.js, there is nothing about page-a.

My question is, why is this happening? And how do I force typescript to import a module that is not explicitly used by the code?

deerchao
  • 10,454
  • 9
  • 55
  • 60
  • I've accept this answer as it's the right answer for my question. But I've used another approach to solve my problem, which you can see here: https://typescript.codeplex.com/discussions/443144 – deerchao May 10 '13 at 05:28

3 Answers3

11

There are two other ways besides the one mentioned by @basarat to ensure that the imported module is included in the define function and thus loaded.

Include the amd-dependency element at the top of your TypeScript file.

///<amd-dependency path="pathToFileRelativeToBaseWithoutFileExtension"/>

or 

import moduleName = require("pathToFileRelativeToBaseWithoutFileExtension");
moduleName;  //Does not require declaring a new variable.

The former is probably the one with the least chance of having side effects. Unfortunately, the element and its usage are not well documented.

I found these methods necessary when using lazy loading of AngularJS modules that create and register types to be dependency injected. Since the type is never created or assigned as far as the TS compiler is concerned, it does not create the necessary parameter for the define function.

They say this is by design (https://typescript.codeplex.com/workitem/2436) but I respectfully disagree. If I have imported a module/file and I have a reference to a concrete type in that module, then that module must be loaded at that point to operate. Having to do extra steps is redundant.

Richard Collette
  • 5,462
  • 4
  • 53
  • 79
4

Your generated js will not import a module not explicitly used in code. Typescript is clever that way and will not generate any js for a module that is only imported and not used.

You need to :

  • export a variable in the first module AND
  • import the first module in the second module AND
  • Use the exported variable in the second module

so have page-a.js something like: 

export var x = 123; // just to export something that you can use
alert('this is from page-a');

and main.ts as : 

import pageA = module('page-a')
var foo = pageA.x; // If you remove this line and you will not get the alert from page-a
alert('this is from main');
basarat
  • 261,912
  • 58
  • 460
  • 511
  • Thanks, your trick works. I'll wait some time to see if there is any better solution before accepting the answer. – deerchao May 09 '13 at 07:47
  • 1
    It is not trickery :) requirejs "requires" modules to be enclosed in define([],()=>{}) blocks. – Arek Bal May 09 '13 at 09:03
  • TypeSript will generate it only if there is smth to export in file. – Arek Bal May 09 '13 at 09:10
  • @user1749204 I know. But it does not satisfy my needs. If only I can "force" import a module.. – deerchao May 09 '13 at 17:12
  • I know there are many troubles with AMD and modules... I have spent like 28 hours last weekend dealing with this stuff. There are many problems and many solutions. Ambient declarations, requirejs plugins, declaration files. So please elaborate more what would you like to achieve in different question. – Arek Bal May 10 '13 at 08:07
2

I know that I am late but here is another way to achieve this:
You can tell typescript to import a module just for the side effects by using:
import "path/to/external/module";
Though this is es6 syntax typescript will transform it into AMD require() when you pass --module amd to tsc and since it is only imported for side effects it will not get dropped.

Haringat
  • 21
  • 2