4

I created a new project using the gulp-angular Yeoman generator with language set to TypeScript. Then ran the Gulp build process and also opened the page in a web browser, which all worked without any bigger problems. I only had to replace ref: "master" in the tsd.json with ref: "1.4.1" to make the build work. Basically I executed following commands:

yo gulp-angular
vim tsd.json
gulp
gulp serve
code .

Afterwards I opened the project in Visual Studio Code.

Now, Visual Studio Code complains for example that it "Cannot find namespace 'ng'" for each occurrence where AngularJS data types are used. It also complains about MomentJS and other typings defined in *.d.ts files.

The project's tsd.json looks like this:

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "1.4.1",
  "path": ".tmp/typings",
  "bundle": ".tmp/typings/tsd.d.ts"
}

The .tmp/typings folder contains following files:

angular-ui-router/angular-ui-router.d.ts
angularjs/angular-animate.d.ts
angularjs/angular-cookies.d.ts
angularjs/angular-mocks.d.ts
angularjs/angular-resource.d.ts
angularjs/angular-sanitize.d.ts
angularjs/angular.d.ts
jquery/jquery.d.ts
moment/moment-node.d.ts
moment/moment.d.ts
toastr/toastr.d.ts
tsd.d.ts

To give an example of one of the source files where Visual Studio Code is complaining, here is the navbar.directive.ts file:

module editorTs {
  'use strict';

  /** @ngInject */
  export function acmeNavbar(): ng.IDirective {

    return {
      restrict: 'E',
      scope: {
        creationDate: '='
      },
      templateUrl: 'app/components/navbar/navbar.html',
      controller: NavbarController,
      controllerAs: 'vm',
      bindToController: true
    };

  }

  /** @ngInject */
  class NavbarController {
    public relativeDate: string;

    constructor(moment: moment.MomentStatic) {
      this.relativeDate = moment(1444135396045).fromNow();
    }
  }
}

In this file Visual Studio Code is complaining about the ng.IDirective type that it "Cannot find namespace 'ng'" and it is complaining about the moment.MomentStatic type that it "Cannot find namespace 'moment'".

edit:

Explicitely referencing the type definition files by adding the following to the top of navbar.directive.ts removes the problem:

/// <reference path="../../../../.tmp/typings/angularjs/angular.d.ts"/>
/// <reference path="../../../../.tmp/typings/moment/moment.d.ts"/>

But these files are already referenced in .tmp/tsd.d.ts, which contains the following:

/// <reference path="angular-ui-router/angular-ui-router.d.ts" />
/// <reference path="angularjs/angular-animate.d.ts" />
/// <reference path="angularjs/angular-cookies.d.ts" />
/// <reference path="angularjs/angular-mocks.d.ts" />
/// <reference path="angularjs/angular-resource.d.ts" />
/// <reference path="angularjs/angular-sanitize.d.ts" />
/// <reference path="angularjs/angular.d.ts" />
/// <reference path="jquery/jquery.d.ts" />
/// <reference path="moment/moment-node.d.ts" />
/// <reference path="moment/moment.d.ts" />
/// <reference path="toastr/toastr.d.ts" />

So there should be no need to explicitly reference the files?

zabbarob
  • 1,080
  • 2
  • 11
  • 23

4 Answers4

2

Adding a tsconfig.json to the root of my VS Code project is what fixed the issue for me. Also, had to restart VS code. Here is what I put inside that file:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true
    }
}

For more info on the tsconfig.json file, check out:

https://code.visualstudio.com/docs/languages/typescript

Vakey
  • 394
  • 1
  • 3
  • 15
1

Cannot find namespace 'ng'"

Make sure the project contains no reference to declare module ng. Same for moment.

Update

based on edit in the question:

Explicitely referencing the type definition files by adding the following to the top of navbar.directive.ts removes the problem

Please use a tsconfig.json : https://basarat.gitbooks.io/typescript/content/docs/project/compilation-context.html

basarat
  • 207,493
  • 46
  • 386
  • 462
  • Running `grep -ri "declare module ng" .` only reveals one line `./bower_components/angular-ui-router/api/angular-ui-router.d.ts:declare module ng.ui {`. – zabbarob Oct 07 '15 at 00:07
  • Change that to `declare module angular.ui` – basarat Oct 07 '15 at 00:22
  • Tried it, but that doesn't help. I assume that somehow Visual Studio Code must be told where it can find the typings. Since `gulp build` is working the typings seem to be included correctly during build. – zabbarob Oct 07 '15 at 00:32
  • don't use a reference comment. Use tsconfig.json See answer update – basarat Oct 07 '15 at 00:36
  • Thanks! That helped :-). All namespaces are now detected correctly. As a side note: When I change back `declare module angular.ui` to `declare module ng.ui` in `./bower_components/angular-ui-router/api/angular-ui-router.d.ts` the `ng` namespace is still detected but not angular's definitions it contains. I have no problem with changing the file, but I wonder because both angularjs and angular ui router are widely used and I can't imagine being the first one to stumble upon that problem. But maybe they'll fix that in the future ;-). Thanks again! – zabbarob Oct 07 '15 at 01:03
  • 5
    Hmm. I'm having this same problem and I don't understand what the solution of "use a tsconfig.json" is. What goes in tsconfig.json? – Jason Swett Apr 22 '16 at 15:56
  • @JasonSwett Check out this link on what put inside it: https://code.visualstudio.com/docs/languages/typescript – Vakey Jun 13 '17 at 09:13
1

I found the following in a discreet location in the code. Likely put there to avoid type errors. Seems like vscode encountered this and redefined the global 'angular' variable as type of 'any'.

var angular = window['angular'];
djabraham
  • 766
  • 11
  • 20
0

I had the same problem; it appears typings was stripping the original definition file referencing the "ng" import.

Add this back to your original angular/index.d.ts file:

// Collapse angular into ng import ng = angular;

Or better yet, place it in a ng.d.ts file so it's not overwritten by typings again.

Benson
  • 3,301
  • 2
  • 22
  • 37