I am working with ASP.NET for last few years, so I'm fortable working with MVC,JavaScript, Visual studio etc.

Now I have a small project that I need to take care of. It was developed in AngularJS. I have installed Visual Studio Code so I can start & debug the application. I understand I need to create a launch.json file, however I'm not sure what goes into this file.

launch.json

            {
            "version": "0.2.0",
            "configurations": [
                {
                    "name": "Launch",
                    "type": "node",
                    "request": "launch",
                    "program": "${workspaceRoot}\\manager\\angular\\js\\app.js",
                    "stopOnEntry": false,
                    "args": [],
                    "cwd": "${workspaceRoot}",
                    "preLaunchTask": null,
                    "runtimeExecutable": null,
                    "runtimeArgs": [
                        "--nolazy"
                    ],
                    "env": {
                        "NODE_ENV": "development"
                    },
                    "externalConsole": false,
                    "sourceMaps": false,
                    "outDir": null
                },
                {
                    "name": "Attach",
                    "type": "node",
                    "request": "attach",
                    "port": 5858,
                    "address": "localhost",
                    "restart": false,
                    "sourceMaps": false,
                    "outDir": null,
                    "localRoot": "${workspaceRoot}",
                    "remoteRoot": null
                }
            ]
        }

app.js file

    // Declare app level module
    var main = angular.module('eng-im', [
        'ngAnimate',
        'ngRoute',
        'ngCookies',
        'toaster',
        'ui.router',
        'ui.bootstrap',
        'angularSpinner',
        'engrafa.directives',
        'engrafa.controllers',
        'rt.encodeuri',
        'searchbar',
        'base64'
    ]);

When I hit F5, I see debugger starts at "angular.module()" method but then when I step through it throws an exception.

> node --debug-brk=40967 --nolazy manager\angular\js\app.js 
Debugger listening on port 40967   
c:\code\manager\angular\js\app.js:32  
var main = angular.module('eng-im', [           ^
ReferenceError: angular is not defined   
        at Object.<anonymous> (c:\code\manager\angular\js\app.js:32:12)  
        at Module._pile (module.js:410:26)  
        at Object.Module._extensions..js (module.js:417:10)  
        at Module.load (module.js:344:32)  
        at Function.Module._load (module.js:301:12)  
        at Module.runMain [as _onTimeout] (module.js:442:10)  
        at Timer.listOnTimeout (timers.js:92:15)  

Questions
1) AngulerJs application has app.js file & index.html file. What should be the value for "program" property in launch.json?

2) Do I need to install any extension for AngularJS?

I am working with ASP.NET for last few years, so I'm fortable working with MVC,JavaScript, Visual studio etc.

Now I have a small project that I need to take care of. It was developed in AngularJS. I have installed Visual Studio Code so I can start & debug the application. I understand I need to create a launch.json file, however I'm not sure what goes into this file.

launch.json

            {
            "version": "0.2.0",
            "configurations": [
                {
                    "name": "Launch",
                    "type": "node",
                    "request": "launch",
                    "program": "${workspaceRoot}\\manager\\angular\\js\\app.js",
                    "stopOnEntry": false,
                    "args": [],
                    "cwd": "${workspaceRoot}",
                    "preLaunchTask": null,
                    "runtimeExecutable": null,
                    "runtimeArgs": [
                        "--nolazy"
                    ],
                    "env": {
                        "NODE_ENV": "development"
                    },
                    "externalConsole": false,
                    "sourceMaps": false,
                    "outDir": null
                },
                {
                    "name": "Attach",
                    "type": "node",
                    "request": "attach",
                    "port": 5858,
                    "address": "localhost",
                    "restart": false,
                    "sourceMaps": false,
                    "outDir": null,
                    "localRoot": "${workspaceRoot}",
                    "remoteRoot": null
                }
            ]
        }

app.js file

    // Declare app level module
    var main = angular.module('eng-im', [
        'ngAnimate',
        'ngRoute',
        'ngCookies',
        'toaster',
        'ui.router',
        'ui.bootstrap',
        'angularSpinner',
        'engrafa.directives',
        'engrafa.controllers',
        'rt.encodeuri',
        'searchbar',
        'base64'
    ]);

When I hit F5, I see debugger starts at "angular.module()" method but then when I step through it throws an exception.

> node --debug-brk=40967 --nolazy manager\angular\js\app.js 
Debugger listening on port 40967   
c:\code\manager\angular\js\app.js:32  
var main = angular.module('eng-im', [           ^
ReferenceError: angular is not defined   
        at Object.<anonymous> (c:\code\manager\angular\js\app.js:32:12)  
        at Module._pile (module.js:410:26)  
        at Object.Module._extensions..js (module.js:417:10)  
        at Module.load (module.js:344:32)  
        at Function.Module._load (module.js:301:12)  
        at Module.runMain [as _onTimeout] (module.js:442:10)  
        at Timer.listOnTimeout (timers.js:92:15)  

Questions
1) AngulerJs application has app.js file & index.html file. What should be the value for "program" property in launch.json?

2) Do I need to install any extension for AngularJS?

• javascript
• angularjs
• npm
• visual-studio-code

• The only thing you need to run a angular app is serve the html file that loads the angular.js library and start your app. Any other request to your local server must deliver the exact path called in the request. The problem with your approach is that your app.js is trying to use a script that is not loaded yet ( angular). – Vinicius Zaramella Commented Mar 18, 2016 at 17:13
• You need to include the actual AngularJS library: github./angular/angular.js – Thomas Illingworth Commented Mar 18, 2016 at 17:14
• the application is already developed & running in production for quite some time now. That means i am assuming references are correct. Im not sure which IDE other developers have used. I was trying to use Visual Studio Code. What is the preferred IDE for AngulerJS in Windows – LP13 Commented Mar 18, 2016 at 17:27
• 2 Ok...so you need to load your index.html file and not your app.js. But in orther to this to work the webserver that vscode starts need to be able to delivery correctly the files that index.html will try to load. – Vinicius Zaramella Commented Mar 18, 2016 at 17:46

1 Answer 1

I remend not even using the launch.json approach, and, you don't need extensions to run your AngularJS application in VSCode.

The easiest way I found is to install http-server via npm and use it to serve your application.

First, run npm install http-server from a terminal window in the project's root directory.

Next, add http-server -o to the start script in your package.json file. (The -o opens the served application in your browser automatically.) More options can be found here: https://www.npmjs./package/http-server

An example package.json might look like this:

{
 "version": "1.0.0",
  "name": "myAngular1App",
  "private": true,
  "devDependencies": {},
  "scripts":{
    "start": "http-server -o"
  },
  "dependencies": {
    "http-server": "^0.11.1"
  }
}

Finally, run your application with npm start from a terminal window.