How to execute AngularJS in Visual Studio Code

Question

I am working with ASP.NET for last few years, so I'm comfortable 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._compile (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?

Answer 1

I recommend 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.com/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.