Angular in VSCode

!!! UPDATE !!!

As you will read in this post, I stopped working on it at the end of my workday yesterday. Overnight I received a message from a good childhood friend that studied in the USA, received a MS degree in geology, and return to Peru to work. Today he owns a company that employs 60+ people.

I have read on different occasions that some old and readily available medicines seem to work on patients with COVID-19. The severity of the symptoms and the number of days in a hospital has been reduced. The hospital stays are on average five days. When you compare results we are experiencing in North America and Western Europe, our treatment approaches do not seem to be working as well. People continue to die and stays in hospitals are between two and three weeks.

So what is going on?

First and the more obvious idea is that such treatments in Peru and Latin America in general are “fake news”. Could be, but when you look at number of deaths and people who we know are experiencing firsthand the benefits, I think is time to look for other theories.

Second, we live in a country whose economic system is based on Capitalism. Most (never generalize) companies are in business to make the last possible penny of customers at all cost. We have multiple examples (which I will not mention at this time) of companies in which the top executives and stock holders make huge amounts while at the same time many employees and customers are not able to take advantage of lower prices.

The possible conclusion is that Big Pharma backed up by politicians, is only interested in making money so they will delay as much as possible the use of cheap, simple and readily available medicines in favor of the ones in development that could potentially cost millions of deaths and billions of dollars to consumers.

Years ago my wife was seeing a very good doctor in a very good healthcare system. He and his wife, both doctors in medicine, were born in India. They both live in the USA and have built a nice and educated family. My wife asked her doctor for a treatment for nail fungus. Knowing the doctor for years he said that he could prescribe some medicine which is what the hospital suggested, or he could tell her what works in less time and at a fraction of the cost. Dip your feet in warm water with Listerine mouth wash a couple times a week. The issue should disappear in a few weeks. We tried it and it worked.

I did the following Google searches and read some of the articles in the results:

“IVERMECTINA”

“ivermectina coronavirus”

“Ivermectin Wikipedia”

FDA Letter to Stakeholders: Do Not Use Ivermectin Intended for Animals as Treatment for COVID-19 in Humans (https://www.fda.gov/animal-veterinary/product-safety-information/fda-letter-stakeholders-do-not-use-ivermectin-intended-animals-treatment-covid-19-humans)

Ivermectin (https://en.wikipedia.org/wiki/Ivermectin)

Ivermectin, ‘Wonder drug’ from Japan: the human use perspective (https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3043740/)

The FDA-approved drug Ivermectin inhibits the replication of SARS-CoV-2 in vitro (https://www.sciencedirect.com/science/article/pii/S0166354220302011)

FAQ: COVID-19 and Ivermectin Intended for Animals (https://www.fda.gov/animal-veterinary/product-safety-information/faq-covid-19-and-ivermectin-intended-animals)

The approved dose of Ivermectin alone not useful in treating COVID-19 (https://www.news-medical.net/news/20200427/Ivermectin-alone-not-useful-in-treating-COVID-19.aspx)

‘Ivermectin can kill COVID-19 within 48 hours’, Monash University study finds (https://www.thepharmaletter.com/article/ivermectin-can-kill-covid-19-within-48-hours-monash-university-study-finds)

Parasite Drug Shows Early Promise Against COVID-19 (https://www.webmd.com/lung/news/20200407/parasite-drug-shows-early-promise-against-covid-19)

My suggestion would be to check if the sources are reliable and make up your own mind. In my humble opinion we need Capitalism 2.0 and Democracy 2.0.

Today at work I finished adding an API to the iCAS storage server. The API is used to get some counts from some database tables. The selected fields help a trained individual to understand the state of the iCAS server and debug operational issues. As we speak I am making three types of requests each at 1 second interval. The log files keep growing. So far there are no issues. I will leave the test running overnight.

I decided to install Angular for VSCode in a different windows 10 machine. On the computer I am writing this post I have older versions of:

C:\Users\John>node --version
v10.15.3

C:\Users\John>npm --version
6.9.0

If you are interested in Angular (web framework) you will need some familiarity with Node.js and npm. I have used Angular, Node.js and npm on and off. Earlier in my professional career I developed several UIs (User Interfaces) on different platforms using different frameworks and toolkits. I found challenging being able to develop a friendly UI which does not require documentation to operate. With time I have shifted toward the back end which is heavy in interfacing with services, perhaps more complex algorithms and data structures. That said, now and then I need to get a UI done so I need to brush up on a specific technology. It is interesting how frameworks rise to the top and after a few years something else comes up. Having a reasonable understanding and familiarity with different frameworks helps me refresh and learn new things.

In this post I will install Angular on a Windows 10 machine and run a simple test to make sure I am able to use VSCode with it. In the past year or so I have been replacing different IDEs for different programming languages with Visual Studio Code (VSCode).

It seems that the end of my workday (05:00 PM) is rapidly approaching. Will reply to an email that I received from my sister earlier today, and then will punt. I will pick up tomorrow morning around 07:00 AM. Have a nice evening!

Last evening the governor of Minnesota appeared on television to inform the public that starting Monday May 18, 2020 quarantine restrictions will be eased. The idea is that if something goes wrong, which would take between two to three weeks to manifest, we will have to revert to a full quarantine. I studies computer science which does not make me an expert in pandemics. That said I tend to read articles from different sources attempting to discriminate between dubious and valid information. It seems that to prevent overloading the healthcare system, in particular hospital ICU capabilities, moving to the next step requires that the curve showing deaths should have a negative slope. Most people believe that testing is the answer. That is not correct. Tests are not 100% and you can drive away after having a test and be infected an hour or so after. For tests to be of used as an indicator, they need to be more accurate and test all the population every day until we are sure that the virus in the wild has been eradicated. Of course, travelling to other states or other countries invalidate the process.

On the other side of the coin, the economy must reopen. No country will survive if they remain closed until COVID-19 is eradicated. People and authorities need to make sure that employees and customers are protected as much as possible. If that is not the case, we all will pay the price by going back and having to wait a month or two before getting to the current state.

For basic information about Angular (web framework) you can look it up in this Wikipedia link. Angular 9 was released on February 6, 2020. Version 9 moves all applications to use the Ivy compiler and runtime by default. Angular has been updated to work with TypeScript 3.6 and 3.7.

I watched the YouTube video “VSCode Extensions for Angular Developers” to get information about how to use some VSCode extension for Angular. I also read the article “7 must-have Visual Studio Code extensions for Angular”. Both are somewhat dated but is interesting to see the steps that lead this technology to where it is today.

The following list contains some VSCode extensions. Please note that some commonly used extensions are currently bundled in a pack.

o Working with TypeScript in general

  1. TSLint 1.2.3
  2. Auto Import 1.5.3

o Angular Code Generation

  1. Angular Snippets (Version 9) 9.1.2
  2. Angular 8 Snippets 8.1.2
  3. Angular 2 TypeScript/HTML Snippets
  4. Angular 2 Files

o Other

  1. angular2-inline 0.0.17
  2. angular2-switcher 0.3.3

o Bonus!

  1. NgBootstrap Snippets 1.0.0
  2. json2ts 0.0.6

By default, the core of Angular applications contains the following files:

app.component.css
app.component.html
app.component.spect.ts
app.component.ts
app.module.ts

A recommended VSCode extension for Angular work is “Angular Essentials (Version 9) 9.0.1”. It includes the following extensions in the pack:

Angular Snippets
Angular Language Service
Angular Console
Chrome Debugger
Edge Debugger
Editor Config
ESlint
Material Icon Theme
npm
Peacock
Prettier
Winter is Coming

I also read the “Using Angular in Visual Studio Code” tutorial. Angular is a popular JavaScript library developed by Google for building web application user interfaces. The Visual Studio Code editor supports Angular IntelliSense and code navigation out of the box.

Since I did not have Node.js in the Windows 10 machine I was experimenting, I needed to download and install it. I use this link to download the installer.

Selected windows Installer (.msi) 64-bit and  download it to:  c:\Temp\node-v12.16.3-x64.msi. I installed Node.js to:  C:\Program Files\nodejs\. I optionally installed the tools necessary to compile native modules.

On the machine I am writing this post:

C:\Users\johnc>node --version
v12.16.3

C:\Users\johnc>npm --version
6.14.4

I installed the software on a different machine. I will show the versions after installation is completed.

To install the Angular CLI, in a terminal or command prompt type:

C:\Users\johnc>npm install -g @angular/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
C:\Users\johnc\AppData\Roaming\npm\ng -> C:\Users\johnc\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng

> @angular/cli@9.1.5 postinstall C:\Users\johnc\AppData\Roaming\npm\node_modules\@angular\cli
> node ./bin/postinstall/script.js

? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. No
+ @angular/cli@9.1.5
added 271 packages from 206 contributors in 38.507s

You can now create a new Angular application by typing:

C:\Users\johnc>ng new my-app
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE my-app/angular.json (3566 bytes)
CREATE my-app/package.json (1239 bytes)
CREATE my-app/README.md (1022 bytes)
CREATE my-app/tsconfig.json (489 bytes)
CREATE my-app/tslint.json (3125 bytes)
CREATE my-app/.editorconfig (274 bytes)
CREATE my-app/.gitignore (631 bytes)
CREATE my-app/browserslist (429 bytes)
CREATE my-app/karma.conf.js (1018 bytes)
CREATE my-app/tsconfig.app.json (210 bytes)
CREATE my-app/tsconfig.spec.json (270 bytes)
CREATE my-app/src/favicon.ico (948 bytes)
CREATE my-app/src/index.html (291 bytes)
CREATE my-app/src/main.ts (372 bytes)
CREATE my-app/src/polyfills.ts (2835 bytes)
CREATE my-app/src/styles.css (80 bytes)
CREATE my-app/src/test.ts (753 bytes)
CREATE my-app/src/assets/.gitkeep (0 bytes)
CREATE my-app/src/environments/environment.prod.ts (51 bytes)
CREATE my-app/src/environments/environment.ts (662 bytes)
CREATE my-app/src/app/app.module.ts (314 bytes)
CREATE my-app/src/app/app.component.html (25725 bytes)
CREATE my-app/src/app/app.component.spec.ts (942 bytes)
CREATE my-app/src/app/app.component.ts (210 bytes)
CREATE my-app/src/app/app.component.css (0 bytes)
CREATE my-app/e2e/protractor.conf.js (808 bytes)
CREATE my-app/e2e/tsconfig.json (214 bytes)
CREATE my-app/e2e/src/app.e2e-spec.ts (639 bytes)
CREATE my-app/e2e/src/app.po.ts (301 bytes)
√ Packages installed successfully.
warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in browserslist.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/protractor.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.e2e-spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.po.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in karma.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/polyfills.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/styles.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/test.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.app.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.spec.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tslint.json.
The file will have its original line endings in your working directory
    Successfully initialized git.

my-app is the name of the folder for your application. In my machine I used the new folder at:  C:\Users\johnc\my-app.

Let’s quickly run our Angular application by navigating to the new folder and typing ng serve to start the web server and open the application in a browser:

# **** ****
C:\Users\johnc>dir
05/13/2020  03:12 PM    <DIR>          .
05/13/2020  03:12 PM    <DIR>          ..
05/13/2020  03:07 PM                57 .angular-config.json
05/13/2020  03:03 PM    <DIR>          .config
09/22/2019  08:00 AM    <DIR>          .eclipse
03/15/2020  08:38 AM                59 .gitconfig
04/23/2020  11:11 AM    <DIR>          .p2
05/07/2020  08:11 AM         1,005,502 .pipwin
04/21/2020  08:07 AM    <DIR>          .pylint.d
09/22/2019  08:00 AM    <DIR>          .tooling
03/10/2020  03:53 PM    <DIR>          .vscode
05/13/2020  07:59 AM    <DIR>          3D Objects
05/13/2020  07:59 AM    <DIR>          Contacts
04/08/2020  07:59 AM    <DIR>          ContainsCloseNums
02/17/2020  03:52 PM    <DIR>          Documents
05/13/2020  02:55 PM    <DIR>          Downloads
09/22/2019  07:57 AM    <DIR>          eclipse
09/22/2019  07:59 AM    <DIR>          eclipse-workspace_0
05/13/2020  07:59 AM    <DIR>          Favorites
05/13/2020  07:59 AM    <DIR>          Links
05/13/2020  07:59 AM    <DIR>          Music
05/13/2020  03:49 PM    <DIR>          my-app
09/12/2019  04:36 PM    <DIR>          NCH Software Suite
05/13/2020  08:00 AM    <DIR>          OneDrive
05/04/2020  03:42 PM    <DIR>          pipwin
05/13/2020  07:59 AM    <DIR>          Saved Games
05/13/2020  07:59 AM    <DIR>          Searches
05/11/2020  03:04 PM    <DIR>          source
05/13/2020  07:59 AM    <DIR>          Videos
05/05/2020  01:30 PM    <DIR>          vimfiles
05/11/2020  12:13 PM    <DIR>          workspace0
05/05/2020  01:51 PM             3,281 _viminfo

# **** ****
C:\Users\johnc>cd my-app

# **** ****
C:\Users\johnc\my-app>ng serve

chunk {main} main.js, main.js.map (main) 57.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.72 MB [initial] [rendered]
Date: 2020-05-13T21:17:43.173Z - Hash: 5d607fc6b7dcdecb8ae5 - Time: 4474ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

Open Chrome as follows:

You should see “Welcome to app!!” on http://localhost:4200 in your browser.

We’ll leave the web server running while we look at the application with VS Code.

To open our Angular application in VS Code, open another terminal (or command prompt) and navigate to the my-app folder and type code .:

C:\Users\johnc>cd my-app

C:\Users\johnc\my-app>code .

Through the TypeScript language service, VSCode can also provide type definition information in the editor through <Go to Definition> (F12) or <Peek Definition> (Alt+F12).

Let’s update the sample application to “Hello World”.

To debug the client side Angular code, we’ll need to install the “Debugger for Chrome 4.12.6” extension.

To set a breakpoint in app.component.ts, click on the gutter to the left of the line numbers. This will set a breakpoint which will be visible as a red circle.

We need to initially configure the debugger. To do so, go to the Run view (Ctrl+Shift+D) and click on the gear button to create a launch.json debugger configuration file. Choose Chrome from the Select Environment drop-down list. This will create a launch.json file in a new .vscode folder in your project which includes a configuration to launch the website.

We need to make one change for our example: change the port of the url from 8080 to 4200. Your launch.json should look like this:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Press F5 or the green arrow to launch the debugger and open a new browser instance. The source code where the breakpoint is set runs on startup before the debugger was attached so we won’t hit the breakpoint until we refresh the web page. Refresh the page and you should hit your breakpoint.

The Debugger for Chrome extension README has lots of information on other configurations, working with sourcemaps, and troubleshooting. You can review it directly within VS Code from the Extensions view by clicking on the extension item and opening the Details view.

There is no code for this post so there is no need for a GitHub repository.

If you have comments or questions regarding this, or any other post in this blog, or if you would like for me to serve of assistance with any phase in the SDLC (Software Development Life Cycle) of a project associated with a product or service, please do not hesitate and leave me a note below. If you prefer, send me a private message using the following address:  john.canessa@gmail.com. I will reply as soon as possible.

Keep on reading and experimenting. It is the best way to learn, refresh your knowledge and enhance your developer toolset!

One last thing, many thanks to all 959 subscribers to my blog!!!

Keep safe during the COVID-19 pandemic.

John

Twitter:  @john_canessa

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.