KnowledgeBase / AngularTraining · Wiki

Setup the Environment:

File-->Preferences-->Settings
(C:\Users\anderson.dsouza\AppData\Roaming\Code\User\settings.json)

//Excluding auto generated files from the project (hiding them in VS Code)
{
        "files.exclude": 
            {
                "**/.git": true,
                "**/.svn": true,
                "**/.hg": true,
                "**/.DS_Store": true,
                "**/*.js": {"when": "$(basename).ts"},
                "**/*.js.map": true
            },
    "window.zoomLevel": 0,

     //For setting bash as the preferred integrated terminal.
     "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",

    //Setup the typescript version to the relevant directory
    "typescript.tsdk": "C:/Users/anderson.dsouza/AppData/Roaming/npm/node_modules/typescript/lib",
    "files.autoSave": "afterDelay"
    "http.proxyStrictSSL": false
}

---

Running the Application from VS Code:

Setup the program to run your application: File: .vscode\launch.json "program": "${workspaceRoot}/node_modules/lite-server/bin/lite-server"

---

Debugging: (Angular seed project - https://github.com/angular/quickstart)

Step 1: Install extension (View/Extensions) "Debugger for chrome"

Step 2: Add configuration to launch.json (.vscode\launch.json)

{
    "name": "Launch Chrome against localhost, with sourcemaps",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/",
    "runtimeArgs": [
    "--user-data-dir",
    "--remote-debugging-port=9222"
    ],
    "sourceMaps": true,
    "diagnosticLogging": true,
    "webRoot": "${workspaceRoot}/src",
    "userDataDir": "${workspaceRoot}/.vscode/chrome" //Specify a userDataDir - this will avoid collisions with other Chrome instances you may already have running.
}

Step 3: start the application

npm start

Step 4: Set required breakpoints in VS code and hit F5 (Start debugging)

---

Debugging: (Angular CLI)

Step 1: Install extension (View/Extensions) "Debugger for chrome"

Step 2: Add configuration to launch.json (.vscode\launch.json)

(Note that is some cases, when you hit F5, the breakpoints are not hit, however, when you restart the application from the debugging steps, breakpoints are hit)

{
"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceRoot}",
        "sourceMaps": true,
        "userDataDir": "${workspaceRoot}/.vscode/chrome",
        "runtimeArgs": [
            "--disable-session-crashed-bubble"
        ]
    },
    {
        "name": "Attach Chrome",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:4200",
        "port": 9222,
        "webRoot": "${workspaceRoot}",
        "sourceMaps": true
    }
]

}

OR

 {
    "name": "Debug with Chrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:4200",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}/src",          
    "userDataDir": "${workspaceRoot}/.vscode/chrome",
    "sourceMapPathOverrides": {              
         "webpack:///./~/*": "${workspaceRoot}/node_modules/*",
         "webpack:///./src/*": "${workspaceRoot}/src/*"
    }
    // Uncomment this to get diagnostic logs in the console
    // "diagnosticLogging": true
},

Step 3: start the application

ng serve