Tuning updates

Author: branflake2267

.vscode/launch.json

@@ -1,13 +1,17 @@
 {
   "version": "0.2.0",
   "configurations": [
+    // Based on: https://github.com/microsoft/vscode-recipes/tree/master/Angular-CLI
     {
       "name": "Launch ng serve & Chrome",
       "type": "chrome",
       "request": "launch",
       "preLaunchTask": "npm: start",
       "url": "http://localhost:4200/#",
+
+      // Note: The ./client directory
       "webRoot": "${workspaceFolder}/client",
+      
       "sourceMaps": true,
       "sourceMapPathOverrides": {
         "webpack:/*": "${webRoot}/*",

.vscode/tasks.json

@@ -32,9 +32,12 @@
           }
         }
       },
+
       "options": {
+        // Note: The ./client directory
         "cwd": "${workspaceFolder}/client"
       },
+
     },
   ]
 }

README.md

@@ -18,7 +18,7 @@ Debugging Angular with Visual Studio Code.
 The app generation is based on https://angular.io/guide/setup-local.
 
 * Run `npm install -g @angular/cli` - Install the app generator CLI tool.
-* Run `ng new client` - Generate an application.
+* Run `ng new client` - Generate an application, I named it `client`.
 * Run `cd client` - Change directory to the app.
 * Run `ng serve --open` - Started the server and open Chrome. 
 
@@ -32,7 +32,7 @@ The app generation is based on https://angular.io/guide/setup-local.
 1. [launch.json](./.vscode/launch.json)
 2. [tasks.json](./.vscode/tasks.json)
 
-### Launchers
+### Run Launchers
 Launching and debugging in chrome will allow you to use break points in the source code. 
 The launchers are based on https://github.com/microsoft/vscode-recipes/tree/master/Angular-CLI.
 

client/package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "dev": "ng serve --open",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

client/src/app/app.component.ts

@@ -9,6 +9,13 @@ export class AppComponent {
   title = 'client';
 
   constructor() {
-    console.log('constructor called');
+    console.log('constructor called...');
+  }
+
+  /**
+   * https://angular.io/guide/lifecycle-hooks
+   */
+  ngAfterViewInit() {
+    console.log("after the view initializes...");
   }
 }