TypeScript IntelliSense for Angular2 in Visual Studio 2015

Question

I have created a project using the "ASP.NET Core Web Application (.NET Core)" Empty project template. I'm doing the Angular2 quickstart tutorial at https://angular.io/guide/quickstart. This is all fine, i've got the quickstart project working.

The problem is that now I am starting to add my own TypeScript files, the intellisense for Angular2 does not seem to be working.

I have TypeScript 1.8.10 installed.

I'm using the @angular/ dependencies as follows in my package.json;

{
  "name": "product-management",
  "version": "1.0.0",
  "author": "Deborah Kurata",
  "description": "Package for the Acme Product Management sample application",
  "scripts": {
    "start": "concurrently \"npm run tsc:w\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "postinstall": "typings install",
    "gulp": "gulp"

  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.1",
    "@angular/upgrade": "2.0.0-rc.1",

    "systemjs": "0.19.29",
    "core-js": "2.4.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12",

    "angular2-in-memory-web-api": "0.0.11",
    "bootstrap": "3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "typescript": "^1.8.10",
    "typings": "1.0.4",
    "gulp": "3.9.1",
    "gulp-clean": "0.3.2"
  },
  "repository": { }
}

This is my tsconfig.json file;

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "compileOnSave": true
}

And my typings.json file;

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

The typings folder has been automatically created at the root of my project, with the folders for the above library typings.

This is my project structure;

project_structure

When I look in the "node_modules/@angular/" folders, I can see they contain the *.d.ts files for TypeScript definitions, however as you can see form the image this folder is not "included" in my project, so I am not sure if the .d.ts files are being used by visual studio...?

I have been searching for answers, but a lot of posts are not based on using Visual Studio 2015 and are also using the older dependency of "angular2" rather than the newer "@angular" dependency structure.

Could anyone point me in the right direction of what to check/configure to get the TypeScript intellisense working with Angular2 in visual studio 2015.

Lastly, when i say its not working, if i add a file such as "file.ts" and then try to type something like @Component (which should be hitting the Angular2 intellisense), it does not and will instead suggest other hits with "Component" in.

Thanks for your help.

refer stackoverflow.com/questions/34367106/… It might helps !! :) — Hardipsinh Jadeja

chumtoadafuq chumtoadafuq · Accepted Answer · 2016-06-06T12:45:01

I realised my intellisense issue was todo with the order in which i was writing the typescript file... (very embarassing).

When i write the import statements at the top first, i.e.

import { Component } from "@angular/core"

Then start writing the angular underneath, the intellisense works fine..

@Component({

})

export class AppComponent {
    pageTitle: string = "Acme Product Management";
}

TypeScript IntelliSense for Angular2 in Visual Studio 2015

1 Answers