31

I'm starting writing AngularJS app using TypeScript. I have this simple module command:

(() => {
    angular
        .module('app', []);
})();

When I run tsc app.ts, I got this: app.ts(2,5): error TS2304: Cannot find name 'angular'.

Do I need to include something to app.ts to make tsc understand the angular?

Regards,

Sanjeev Singh
  • 3,976
  • 3
  • 33
  • 38
Sarun Intaralawan
  • 1,092
  • 3
  • 13
  • 30
  • Not sure about typescript specific. But in Javascript you need to load the main angular source code. – filype Apr 28 '15 at 09:16
  • Yes, after the `tsc` command, I'll get a .js file to be included into html page as usual. – Sarun Intaralawan Apr 28 '15 at 09:18
  • I see, maybe you need to tell typescript to treat angular as a global dependency.. – filype Apr 28 '15 at 09:22
  • 1
    Have a look at this project in typescript and angular - https://github.com/tastejs/todomvc/blob/gh-pages/examples/typescript-angular/js/Application.ts – filype Apr 28 '15 at 09:23

7 Answers7

39

You could simplistically tell the compiler to stop worrying by telling it that "you know all about angular":

declare var angular: any;

To get all the good tooling and type checking, you need to pull in the Angular type definition so the compiler knows what is available.

The type definitions are available via NuGet if you are using Visual Studio or various other methods for your favourite IDE.

Fenton
  • 241,084
  • 71
  • 387
  • 401
  • 3
    Just to add for the non-visual studio folks, take a look at this tool to assist on getting individual type definitions without pulling down the entire repo... https://github.com/DefinitelyTyped/tsd (can work like bower/npm via config file) – Brocco Apr 28 '15 at 10:23
  • 1
    I installed the nuget package today (DefinitelyTyped). It's broken. – Thomas Eyde Dec 27 '15 at 16:44
  • 2
    bad solution, this removes any typescript type support from the imported *.d.ts file for angular – Itanex Feb 05 '17 at 01:25
  • @sohnee that is a great assumption. Perhaps the answer could be rewritten so you can't make that assumption. – Itanex Feb 08 '17 at 07:40
  • That link is broken – adam0101 Dec 20 '17 at 23:06
  • 1
    @adam0101 I have replaced the broken like with a link to the type search utility. This will find any available definition and link through to the NPM page for it. – Fenton Dec 21 '17 at 09:52
24

Using AngularJS 1.x and TypeScript 2.x, I solved this issue by running:

npm install --save-dev @types/angular

and then include the following line on top of the .ts file:

import * as angular from "angular";

Reference: The Future of Declaration Files

Augusto Barreto
  • 3,637
  • 4
  • 29
  • 39
7

You need to include angular.t.ds file in the library

Sonu Jose
  • 123
  • 2
  • 6
3

For me inside of VisualStudio I used part of Augusto's suggested answer and simply did:

npm install --save @types/angular

and it worked like a charm.

Indy-Jones
  • 668
  • 1
  • 7
  • 19
1

ATOM

In tsconfig.json file ensure your "fileGlobs" points to both:-

  1. The TypeScript Definitions you installed with tsd &
  2. Your src .ts files
"filesGlob": [
  "./typings/**/*.ts",
  "./src/client/**/*.ts"
]

This will ensure you have tooling for the libraries you have installed (with tsd) without having to declare any variables. For example, if you tsd install angularjs --save, you can work angular in your src/../*.ts files with all the goody tooling.

Hope this helps. Good Luck.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Aakash
  • 21,375
  • 7
  • 100
  • 81
0

I solved the problem by adding the following line to my package.json, inside the "devDependencies" section:

"@types/angular" : "1.6.17"

after that, i just needed to run

npm install

in order for npm to download all the needed dependencies.

rekotc
  • 595
  • 1
  • 10
  • 21
0

Make sure that in the tsconfig.json the filesGlob points and exposed the typings file:

"filesGlob": ["typings.d.ts" ]
Greenonline
  • 1,330
  • 8
  • 23
  • 31