Importing AngularJS Into Typescript as AMD

Question

I am trying to follow the tutorial on github to stup a build process for typescript and angularjs. I have to be honest I am really struggling. I took the project from github and added angularjs to the bower file, the typings and the lib directory with the angular.ts file (following how JQuery was setup):

/// <reference path="../typings/tsd.d.ts"/>

var angular= angular;
export = angular;

Unfortunately, when I attempt the following I have no luck in getting my app module registered:

import JQuery = require("../lib/JQuery");
import angular = require("../lib/angular");

class A{
  public add(number1:number, number2:number):number{
    return number1+number2;
  }

  public colorBG():void{
    var app = angular.module('myapp',[]);
    $("body").css({"background-color":"black"})
  }
}

export = A;

I am seeing conflicting information online about this being type of import for angular not being possible as an AMD but the definitely typed typing file has it exported as an AMD so what gives? The gulp build process completes successfully but the call to angular.module complains it is not a function in the chrome console. Is there a trick to getting angular into typescript so I can concatenate one output file for my html? I have tried requirejs for AMD, tsify/browserify for commonjs and I cannot get either to work. Thanks in advance for any guidance.

Remo H. Jansen · Accepted Answer · 2016-12-06 00:31:32Z

4

You need to:

Install type definitions for dependencies:

tsd install angular jquery --save

Install dependencies using npm:

npm init
npm install angular jquery --save

This means that your dependencies will not be under the lib folder. They will be under the node_modules folder.

Your /typings/tsd.d.ts file needs to contain references to all your dependencies:

/// <reference path="./jquery/jquery.d.ts"/>
/// <reference path="./angular/angular.d.ts"/>

Then you can reference the /typings/tsd.d.ts from your modules:

/// <reference path="../typings/tsd.d.ts"/>

import { $ } from "jquery";
import { angular } from "angular";

class A {
  public add(number1:number, number2:number):number{
    return number1+number2;
  }

  public colorBG():void{
    var app = angular.module('myapp',[]);
    $("body").css({"background-color":"black"})
  }
}

export { A };

Since TypeScript 1.5 you should use the ES6 module syntax.

Update

Since 2.0 the recomended solution is npm:

$ npm install jquery --save
$ npm install @types/jquery --save-dev

Typings and tsd are no longer required.

edited Dec 6, 2016 at 0:31

answered Oct 3, 2015 at 10:05

Remo H. Jansen

25.2k13 gold badges73 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Shawn Over a year ago

For what it is worth I followed this approach and the typescript will not compile complaining that Module jquery has no exported member $ and module angular has no exported member angular (error TS2305)

Remo H. Jansen Over a year ago

Try with the old syntax for import with import $ = require("jquery"); and import $ = require("angular"); and export export = A;

Remo H. Jansen Over a year ago

Many .d.ts files are not ready to work with the ES6 syntax maybe that is the problem

Shawn Over a year ago

While I have your attention is there a good way to get angularjs and all custom code part of the same javascript output file? Module loaders for amd (require) or commonjs (browserify) do not seem to behave well for me. I got browserify working today but then the sourcemaps to the TS were broke, it has been one problem after another.

Jens Bodal Over a year ago

Installed @types/angular via npm then used import * as angular from 'angular';

|

Collectives™ on Stack Overflow

Importing AngularJS Into Typescript as AMD

1 Answer 1

Update

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related