17

I am trying to use Angular.js in Visual Studio Code. But it's not working. In visual studio 2013 I am able to get the IntelliSense, but not in Visual Studio Code.

1

6 Answers 6

16

In Visual Studio Code, just install following npm package and will get intellisense for JavaScript files.

npm install --save-dev @types/angular

enter image description here

enter image description here

enter image description here

enter image description here

Sign up to request clarification or add additional context in comments.

3 Comments

Yes, that works, but how to get that to work for built-in angularjs services like $http, $q ?
Looks like there is no more support for services such as $http etc. I just asked a very similar question and according to the answer it is not supported anymore: stackoverflow.com/questions/49617075/…
running 'npm install --save-dev @types/angular' in project's root directory works for me.
12

The answer provided here is no longer valid as tsd was deprecated. To install angular or any other Typescript Definition, please follow the next steps. Provided that you already have a package.json file and a jsconfig.json file:

  1. First we will want to install typings globally: npm install typings --global;
  2. Then, at root level on your directory run: typings install dt~angular --global --save.

You should now be able to have IntelliSense on your project.

ProTip! Include typings/ on you .gitignore file before running the second command, to prevent git from watching changes to the newly generated folder for typings. You can also do that for typings.json, but I do not recommend it. Up to you.

I got the information from the github repository readme file and from this post by Laurent Duveau.

Hope it helps.

1 Comment

I get this warning message when installing typings: Typings is deprecated in favor of NPM @types. Any advice?
4

The answer is given here: https://blogs.msdn.microsoft.com/vscode/2015/05/21/getting-started-with-angular-and-visual-studio-code/

Take a look at the "IntelliSense for the Angular Module and Services" part. Be careful though, because there are some typos in the command lines.

Basically this is what you have to do:

1. Install Node and npm on your computer (https://nodejs.org/en/)


2. Install TSD package using NPM

Open your terminal or command line interface and type:

    npm install -g tsd

3. Install the angular TypeScript file in your poject.

Go to the root of your Visual Studio Code project, initiate tsd and add the angular TypeScript file:

cd /my/angular/project
tsd init
tsd query angular --action install --save

This should add a "tsd.json" file and a "typings" folder that contains an "angularjs" folder and a "tsd.d.ts" file.


4. Add the TypeScript file reference

Open the javascript file containing your AngularJS code and add the reference to the TypeScript file at the very beginning, so your file should look like that:

/// <reference path="path/to/typings/tsd.d.ts" />

var app = angular.module('myApp', []);
// ...

(be sure that the line is tripleslashed and that the 'path' attribute corresponds to the "tsd.d.ts" file)


5. Save and restart VSCode

The autocompletion should work just fine in your js file.

NOTE: if you use several files containing AngularJS code, you should add the reference line at the beginning of all of them, but you should not need to restart VSCode again if you already did.

Sorry for the late answer, I hope it's clear and it will still help!

2 Comments

is there any alternative to add a link over every js file?
This appears to address Angular, not AnnularJs as the OP asked for
0

This is what worked for me on Linux Ubuntu 16.04 x64

npm init

sudo npm install -g typings

sudo ln -s /usr/bin/nodejs /usr/bin/node

typings install dt~angular --save --global

touch jsconfig.json

Comments

0

Here i am using node v6.10.2. typings version 2.1.1

step to enable intelligence .

install typings globally like:-

npm install -g typings

to check if tpyings is installed globally or not

npm list -g

once typings installed write:-

typings install dt~angular --save

it will add some of files in your project to make angular globally.

then install angular like:-

npm install angular --save

once these steps done check it like:-

 var app=angular.module('sample',[]);

    app.

once you type app. you will get the all members of app.

Comments

0

Install "Angular Language Service" VSCode Extension!

Features

This extension provides a rich editing experience for Angular templates, both inline and external templates including:

  • Completions lists
  • AOT Diagnostic messages
  • Quick info
  • Go to definition

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.