Visual Studio Code complains that it “Cannot find

Question

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?

Answer 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'];

Answer 2

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

Answer 3

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

Answer 4

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.