According to this post intellisense should also be working on the new VS 2015, but so far I only get intellisense for the angular object and not for the dependencies or my custom modules.
Here's what I did:
Added the angular.intellisense.js to the global javascript references at C:\Program Files (x86)\Microsoft Visual Studio 14.0\JavaScript\References
Restarted VS2015
And then nothing, it just showed exclamation marks whenever I tried to use intellisense on a $http object.
I also added the file to the same place as my angular.js but it still didn't work. The question that I have in this case is, where should I place the file? on the angular public folder with only my angular.js, or on my dev angular folder where all the files downloaded from bower are.
I also tried addind it directly into the tools/options/text editor/javascriptr/intellisense/reference menu, on the Implicit(Web) reference group, but it still didn't work.
On my project I have the following folder structure inside the src folder:
wwwroot
app (my angular site stuff)
controllers
services
views
lib (js dependencies, only the .min.js file of each library)
angular
angular-route
....
_references.js (the visual studio js references file, contains reference to the files inside the app and lib folders)
Libraries (contains the full libraries as downloaded by bower)
angular
angular-route
...
As a side note, I don't have a /scripts folder and therefore no /scripts/_references.js file
.
This was not working for me in Visual Studio 2015 RTM in a web project, but I solved the problem.
This project was not created with Visual Studio and does not have a _references.js file anywhere. So I think this will work in any situation.
I removed all other intellisense resources from within the VS UI to make sure what I did was what fixed it.
Go to https://www.angularjs.org and pull up the download dialog box.
Copy the Uncompressed CDN url. Today that happens to be https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js
In Visual Studio 2015 RTM, go to Tools, Options, Text Editor, Javascript, Intellisense, References. Choose the appropriate Reference Group; for most web project this is Implicit (Web). Paste the url at the bottom text box and click the Add button. Don't dismiss the dialog box yet.
Under Text Editor, Javascript, Intellisense, General, make sure the check box is checked for Download remote references.
Click the OK button.
(optional) If you want intellisense for the angular providers that you create (not part of the angular framework), add _references.js to the root of your project. Don't bother making a Scripts folder. Right click on it and choose auto-sync, then choose update. Go into it and remove any js files created by a build process. If you don't, they can be so large they will break intellisense. Be prepared for a ~5-10 second delay the first time you use intellisense, as it has to load all these references from your project.
You may need to disable intellisense in Resharper for javascript if it interferes with the native intellisense.
Restart Visual Studio. It will not work until you do this. Also, I'm paranoid about closing all other instances other than this instance first, so these settings "stick". So I suggest you do that before restarting this instance.
As #Balthasar pointed out (and in case you are using Resharper) you will need to enable intellisense from Visual Studio for it to work:
Resharper -> options -> environment -> intellisense -> general, select 'Custom Intellisense' and for Javascript you can select Visual studio. Alternatively you can use the 'Visual Studio' statement completion (second option)
i've just realized that the automatic order that _reference.js file uses (first my files then the framework's files) prevented intellinsense to work on other files that weren't the app.js file
this is how it now my _references.js looks like:
/// <autosync enabled="false" />
/// <reference path="angular.js" />
/// <reference path="angular-resource.js" />
/// <reference path="angular-ui-router.min.js" />
/// <reference path="jquery-2.1.4.js" />
/// <reference path="materialize/materialize.js" />
/// <reference path="../App/App.js" />
/// <reference path="../App/Controllers/productsController.js" />
/// <reference path="../App/Controllers/productsEditController.js" />
/// <reference path="../App/Controllers/valuesController.js" />
/// <reference path="../common/common.services.js" />
/// <reference path="../common/productsResource.js" />
/// <reference path="../common/valuesResource.js" />
I had a similar issue and it turned out Resharper was blocking all the nice JavaScript intellisense I had setup in my _references.js file.
Visual Studio intellisense for AngularJS is extremely sentimental (a nice way of saying that it's most likely poorly developed).
So, even if everything is well configured with the _references.js file, and you get intellisense for other libraries like jQUERY, you will most probably not get it for AngularJS.
For example, in VS 2015 community, the below directive will not show intellisense for the $http angular object, although everything works fine with the code:
In the image below, I add an empty array to the module (which means that the module will get created, and if another with the same name exists, it get overwritten), and intellisense starts working:
Here is a snippet of the code for you to test yourself (try and add the empty array here):
(function () {
'use strict';
angular
.module('intellisence.sucks.directives')
.directive('footer', footer);
footer.$inject = ['$http'];
function footer($http) {
$http.
var directive = {
link: link,
restrict: 'EA'
};
return directive;
function link(scope, element, attrs) {
}
}
})();
PS: If you click on any folder on you project in the Solution Explorer and press Ctrl+Alt+A to add a new item, you get suggestion to add a AngularJs Directive, and If you do it, the Directive will be like the one I just showed you, without the empty array on the module declaration, so intellisence won't work with it. It won't work with the example that Microsoft gives to the users... Only works on the module creation, your first file and doesn't work from now on.
I had the same issue. When I added angular, VS 2015 (RTM) modified my _references.js; basically it removed some of my lines in the file. When I added a reference for angula in my _references.js as below
/// <reference path="lib/angular/angular.js" />
I got my intellisense for Angular 1.4.3 in VS 2015!
Follow this article to add more comprehensive intellisense to VS.
http://blogs.msdn.com/b/visualstudio/archive/2015/02/05/using-angularjs-in-visual-studio-2013.aspx
Download the angular.intellisense.js file and place it in the Program Files (x86)\Microsoft Visual Studio 12.0\JavaScript\References folder
i had this issue.
The visual studio IDE will scan any js files referenced in the HTML files and use them if neccesary (for the intellisense etc).
My problem was i was referencing Angularjs using the CDN/http:// addresses and thus Visual studio did not have any information on angular.
Try downloading the angularjs js file directly and include in your project and reference in your index.html, rebuild (just in case) and try again and hopefully it should work.
Hope i helped.
I have this issue for RTM ..apart from angular object and in a hello world complexity senario ($http and all custom objects dont work) .. Followed the _references setups . My only suspicsion is I upgraded from RC to RTM (no fresh install) have created a issue on Git [link]github.com/jmbledsoe/angularjs-visualstudio-intellisense/issues/… ..Grabbing a VHD Win 10 image and going to try that once the d/l finishes :( –
UPDATE
Ok with a bit of help here is teh answer .... The Intellisense engine never sees the module named "sportsStore" being created, since it is created in the app.html file in a script block:
<script>
angular.module("sportsStore", ["customFilters","cart"]);
</script>
The VS Intellisense engine is "executing" the code in your project in order to discover how to do code completion. It's using the _references.js file as its starting point and executing each reference from that file, in order. Since VS Intellisense never executes a line of code that creates the AngularJS module named "sportsStore", it doesn't know how to do code completion.
Move the JavaScript code above into its own JS file (let's call it "app.js") and include a reference to it in _references.js. Make sure the "app.js" reference is immediately after the "angular.js" reference, since you need it to create the module before the other script files configure it. :D
Just create an _references.js file in a folder named 'Scripts' (naming convention) at the root of your project. Update it with your necessary javascript files and you should be able to get intellisense. Here's a link on why such a thing was needed: http://madskristensen.net/post/the-story-behind-_referencesjs
None of the above work for me. Mine is Visual Studio 2017 - Professional
Yet I got it working using my solution here -->
You have to reference the source by an enclosed /// <reference path="yourpath"/> even the source is in the same folder where you code is.
Do NOT USE minified source. All your source has to be non-minified.
If you store your path stmts in _reference.js file, make sure that file is at the same dir where your code file is.
Although I can put the reference stmt inside my code file, I chose to use a separate file "_reference.js" to store it.
You can put this with your code :
/// <reference path="../_assets/JS-Main/angular-1.3.13.js" />
var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
Or you can enter this line into your _reference.js file
/// <reference path="../_assets/JS-Main/angular-1.3.13.js" />
After you have done all the above, you should be able to see the angular intellisense.
You can do the same thing for others' intellisense like jQuery, Anytime, _underscore, etc... just keep adding path statements into the _reference.js file and you can also copy that _reference.js file to other websites if they have the same dir struct. Good luck!
Related
I have done the following:
Installed both the AngularJS and NodeJS Plugins in Phpstorm
Downloaded the latest stable release of Angular (1.4.8)
Added angular.js to the project
Added angular.js to the list of libraries in Phpstorm
Directives in my HTML will autocomplete fine (e.g. ng-modal), but trying to do something like Module.fact does not autocomplete to factory. Here is my code:
var appModule = angular.module("appModule", ['ngRoute']);
appModule.fac //This is me typing factory, but auto complete doesn't help
I am running PhpStorm 10.0.2. I have tried using different versions of PhpStorm and I have also tried using Angular 1.5 (the beta version) with the same result. Also, I am new to angular, but my code is working. Thank you!
*I have already reviewed these links and SO posts:
https://www.jetbrains.com/webstorm/help/using-angularjs.html
https://www.jetbrains.com/webstorm/help/configuring-javascript-libraries.html
Why do AngularJS directives (attributes, etc.) show up as "invalid" in WebStorm 8?
Getting angularJS autcomplete in Webstorm/PHPStorm
The angular variable is a global one and when you have to many declarations of the same global variable PhpStorm/WebStorm can not handle auto-completion.
It's important to verify that only 1 declaration for angular is being discovered by PhpStorm. This doesn't have anything to do with your actually JavaScript project, but where PhpStorm looks for declarations.
If you hold down ctrl and mouse over the world angular. It should show it highlighted to be clickable, and a tooltip showing where it is declared.
If the tooltip says there are multiple definitions of the identifier, then it can not do autocomplete correctly. This is true for most JS variables in Php/WebStorm not just this angular variable.
You have a couple of ways to fix this:
1) Force type declaration with JsDoc to TypeScript
/**
* #var {angular.IAngularStatic} myAngular
*/
var myAngular = angular;
This will declare the variable myAngular using the TypeScript definition. There is less likely to be conflict with any already scanned JS source files that also declare angular. It's an easy fix, but adds unnecessary source code to your project.
2) Disable JavaScript source files by excluding them
If you are using node_modules or bower_components then you need to include some of the JS files from those folders, but not unnecessary duplicates. You won't need any Angular JS files since you've already installed the TypeScript definitions (which work better for auto-completion). In the Project Files panel in PhpStorm find the Angular packages, right click on those folders and "Exclude" those folders. You can also do this via project settings in "Files / Settings / Directories"
3) Ignore bundled output files for JavaScript
This is the most common issue I find with PhpStorm/WebStorm. PhpStorm will also scan minified JavaScript files you've packaged into your webroot/js folder. For example; If you use grunt to uglify your JavaScript code into app.min.js and inside that file is Angular and your project code. PhpStorm will scan this and create duplicate declarations of everything it finds.
Find all those duplicate *.js files in your project, right mouse click on the files and select "Mark as Plain Text" from the menu. This will tell the editor to completely ignore the file from all intellisense scanning.
So to summarize. If you control click on a declaration to go to source, and PhpStorm does not go immediately, but instead prompts you select from multiple declarations, then you have duplicates in your project and you need to narrow the scope. Once that is done everything else should work as expected.
f you prefer to use a CDN, place the cursor over the highlight library name, hit Alt+Enter, and Download Library. This will set up a local library in WebStorm’s cache (not in your project) so WebStorm can access AngularJS methods, directives, etc for autocompletion and documentation lookup.
in the past I have used webstorm, karma, jasmine and phantom to run js tests. I have to now run tests within VS2015 and opted for resharper/jasmine and phantom js. I have my tests running ok and its actually looking good. The only gripe I have is that with karma you could specify wild card references and hence using a config all the referenced dependent js files are in one location. Now Im having to specify references in every spec file that I create. Is there an better way of doing this?
e.g. at the top of my spec file I have a couple of these:
///<reference path="~/Scripts/jasmine/jasmine.js"/>
///<reference path="~/Scripts/jasmine/jasmine.js"/>
///<reference path="~/Scripts/jasmine/jasmine-html.js"/>
///<reference path="~/Scripts/jasmine/boot.js"/>
///<reference path="~/Scripts/angular-core/angular.js"/>
and each file has much of the same references copied and pasted.
As a side note - I have also noticed that under the scripts folder in my mvc app there is an auto gen _references.js file that seems to have all my referenced files in it (though some paths are relative) - not sure that that is!
thanks
First off, R# 9.2 automatically loads in the needed jasmine files, so they're not necessary as references, and additionally if you load e.g. 2.3 jasmine as references, it breaks the css on the displayed page.
What I found that works well is to create a testReferences.js with the stuff I want in all unit tests, and then reference it with additional references.
testReferences.js:
/// <reference path="~/wwwroot/lib/angular/angular.js" />
/// <reference path="~/wwwroot/lib/angular-mocks/angular-mocks.js" />
/// <reference path="~/wwwroot/app/app.js" />
Unit Test:
/// <reference path="~/scripts/testReferences.js" />
/// <reference path="~/wwwroot/app/Production/productionQueueController.js" />
I opened up angular code in VSCode. At first it didn't recognize angular, so used the light-bulb to add:
/// <reference path="../../typings/angularjs/angular.d.ts"/>
But it still doesn't recognize angular and now I get an error saying that it can't find angular.d.ts.
It looks like the problem was that VSCode failed to download the file and create the directories. I googled angular.d.ts and found it on GitHub - DefinitelyTyped
I created "typings/angularj/" folders and added the file and now intellisense is working for angular :)
You don't need to add anything to your file, VS Code will add angular.d.ts to the typings folder. VSCode doesn't require the /// tag to be included in all your files, you might even confuse the editor doing this.
If you don't see the "typings" folder with the angular intellisense file you will not get intellisense and you need to repeat the light-bulb step.
This question already has answers here:
intellisense and code complete for DefinitelyTyped (TypeScript type definitions) on WebStorm IDE
(3 answers)
Closed 7 years ago.
I am just starting out with TypeScript and trying to add it to an existing AngularJS project.
I have 'excluded' the bower directory where angular is installed and downloaded the definitelyTyped definitions for angular in the preferences window.
Angular code completion is working, but typescript is giving me an error TS2304 wherever I code 'angular.'.
What have I missed?
To fix the error, you need to copy the downloaded definitelyTyped TypeScript stubs from ~/Library/Caches/WebStorm9/extLibs folder to your project directory and reference them in your .ts file using /// <reference path> comments, like
/// <reference path="path/to/angular.d.ts" />
Just to make things clear:
When you download Typescript stubs via Preferences/Languages & Frameworks/Javascript/libraries, they are placed into ~/Library/Caches/WebStorm9/extLibs.
It's perfectly fine for Webstorm - it doesn't require placing library files directly in the project folder. Also, Webstorm itself doesn't need ///reference comments to be able to resolve types - type hinting/navigation/completion works even if the types are not explicitly referenced. But the tsc compiler does need the d.ts files being placed somewhere in the project directory and referenced via ///reference comment.
So, to get downloaded stubs available to typescript compiler, you need to copy/move them to you project directory (and probably rename to more human readable names :)) and add comments (can be done using 'Generate reference path comment' intention (hit Alt+Enter on a reference to generate a comment)).
We plan to provide an option to download files directly to the project folder (instead of system/extLibs/ ) in the future versions
probably need to add a reference to the .d.ts in the particular .ts file having the problem, something like:
/// <reference path="../typings/angular.d.ts"/>
downloaded the definitelyTyped definitions for angular in the preferences window.
The intent of downloading the stubs like that is to provide intellisense for JavaScript code not TypeScript code. For TypeScript code you should download and reference the .d.ts directly in your TypeScript code.
I am attempting to use Typescript to build an Angular JS 1.3 app, and I am having trouble right out the gate because it says that "module" does not exist on"typeof angular".
I thought this was easily rectified by just including the "DefinitelyTyped" angular.d.ts file, but that doesn't seem to have done anything.
My folder structure looks like this...
application
assets
typings
angularjs
angular.d.ts
jquery
jquery.d.ts
app
app.core.ts
js
jquery
jquery.js
And my angular app.core.ts looks like this;
/// <reference path="~/application/assets/typings/jquery/jquery.d.ts" />
/// <reference path="~/application/assets/typings/angularjs/angular.d.ts" />
((): void => {
'use strict';
angular
.module('app', [
/*
* Angular Modules
*/
'kendo.directives',
'ui.bootstrap',
'ui.bootstrap.drawer',
'ui.check'
]);
})();
At first I just assumed the paths were wrong, but it doesn't seem to matter what paths I use. If I use paths relative to the app.core.ts file, it still doesn't work.
I am using Visual Studio 2013.4 Professional, and it looks like this on my screen;
Can anyone help me? I'm getting very frustrated already with angular.
The latest definition files use TypeScript 1.4 syntax. Please verify your IDE supports this version.