angular with typescript error, cannot find name angular

Question

I done all the settings including adding typescript compiler in webstorm, installing tsd with npm, and all other stuff.

I still get error 'Cannot find name Angular'

tsd.json

{

  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {
    "angularjs/angular.d.ts": {
      "commit": "70a693ec17c7ae4b9b7c1fa6c399ac3e82e3843e"
    },
    "jquery/jquery.d.ts": {
      "commit": "70a693ec17c7ae4b9b7c1fa6c399ac3e82e3843e"
    }
  }
}

sorting.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{{$ctrl.mytest}}
</body>
</html>

sorting.ts

var app = angular.module('myApp', []);
app.component('sorting', {
    templateUrl: 'modules/sorting/sorting.html',
    controller: SortingClass
});

 class SortingClass {

    public mytest: string = 'abcd';

}

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <title> Facility</title>
    <script type="text/javascript" src="bower_components/angular/angular.js"></script>
    <script src="modules/sorting/sorting.js" type="text/javascript"></script>
</head>
<body>
</body>

Possible duplicate of [Getting Error - Cannot find name 'angular'](https://stackoverflow.com/questions/29915175/getting-error-cannot-find-name-angular) — James Lawruk, Sep 01 '17 at 12:27

score -2 · Accepted Answer · answered Sep 21 '16 at 13:06

My friend, you have lot of syntax errors. Please have a look at the basics of angular js. For now, try this code. This should work:

Index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <title> Facility</title>
    <script type="text/javascript" src="bower_components/angular/angular.js"></script>
    <script src="modules/sorting/sorting.js" type="text/javascript"></script>
</head>
<body ng-controller="sorting as ctrl">
   <div> {{ctrl.mytest}} </div>
</body>
</html>

Sorting.ts

module xyz {
var angular: any;
var app = angular.module('myApp', []);
app.controller('sorting', SortingClass);

 public class SortingClass {
   public mytest: string = 'abcd';
 }
}

its not $ctrl. Its just ctrl. Copy paste the code and verify it — g.005, Sep 21 '16 at 13:54

angular with typescript error, cannot find name angular

1 Answers1