My Angular App

Download nodejs from nodejs.org

Unpack nodejs

Install nodejs (and NPM to go with it automatically) locally.

$ ln -s node-v14.9.0-darwin-x64 nodejs

Add "export PATH=/Users/mrbear/nodejs/bin:$PATH" to .bashrc

Install Angular CLI¹.

$ npm install -g @angular/cli

[angular@vps386 ~]$ ng --version
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.8
Node: 14.9.0
OS: darwin x64

Angular:
...
Ivy Workspace:

Package Version
------------------------------------------------------
@angular-devkit/architect 0.1000.8
@angular-devkit/core 10.0.8
@angular-devkit/schematics 10.0.8
@schematics/angular 10.0.8
@schematics/update 0.1000.8
rxjs 6.5.5

Update angular CLI

npm search @angular/cli

Initial project creation

[angular@vps386 ~]% ng new myproject
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE myproject/README.md (1027 bytes)
CREATE myproject/.editorconfig (274 bytes)
CREATE myproject/.gitignore (631 bytes)
CREATE myproject/angular.json (3590 bytes)
CREATE myproject/package.json (1261 bytes)
CREATE myproject/tsconfig.base.json (458 bytes)
CREATE myproject/tsconfig.json (426 bytes)
CREATE myproject/tslint.json (3184 bytes)
CREATE myproject/.browserslistrc (853 bytes)
CREATE myproject/karma.conf.js (1021 bytes)
CREATE myproject/tsconfig.app.json (292 bytes)
CREATE myproject/tsconfig.spec.json (338 bytes)
CREATE myproject/src/favicon.ico (948 bytes)
CREATE myproject/src/index.html (295 bytes)
CREATE myproject/src/main.ts (372 bytes)
CREATE myproject/src/polyfills.ts (2835 bytes)
CREATE myproject/src/styles.css (80 bytes)
CREATE myproject/src/test.ts (753 bytes)
CREATE myproject/src/assets/.gitkeep (0 bytes)
CREATE myproject/src/environments/environment.prod.ts (51 bytes)
CREATE myproject/src/environments/environment.ts (662 bytes)
CREATE myproject/src/app/app-routing.module.ts (245 bytes)
CREATE myproject/src/app/app.module.ts (393 bytes)
CREATE myproject/src/app/app.component.css (0 bytes)
CREATE myproject/src/app/app.component.html (25757 bytes)
CREATE myproject/src/app/app.component.spec.ts (1068 bytes)
CREATE myproject/src/app/app.component.ts (213 bytes)
CREATE myproject/e2e/protractor.conf.js (869 bytes)
CREATE myproject/e2e/tsconfig.json (299 bytes)
CREATE myproject/e2e/src/app.e2e-spec.ts (642 bytes)
CREATE myproject/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.
Successfully initialized git.

[angular@vps386 ~]$ % ng serve
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 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.66 MB [initial] [rendered]
Date: 2020-09-02T12:23:53.701Z - Hash: c7223a73cc964c3ed1e6 - Time: 5305ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

Creating our first component

[angular@vps386 ~]$ ng generate component player-settings
installing component
create src/app/player-settings/player-settings.component.css
create src/app/player-settings/player-settings.component.html
create src/app/player-settings/player-settings.component.spec.ts
create src/app/player-settings/player-settings.component.ts
update src/app/app.module.ts

Components, Directives, Pipes and Services

For an indepth explanation see reference [4].

modules

a grouping of different components and services

components

a component controls a patch of screen called a view

directives

Attribute or structural directives change the Dom. For example ngIf and ngFor. A component is basically a specialized form of directive.

pipes

filters, for example for displaying dates and currency which are built in filters.

services

independent business logic or connections to external sources wrapped in classes and injected.

Verifying Angular Version

The version of angular can be seen in the dom of your app, something like:

<app-root _nghost-jcv-c16="" ng-version="10.0.14">

Settings depending on environment (prod/test/dev)

There are different .ts files loaded depending on which environment you are building for. These are appropriately named environmnent.*.ts.

See for more information references 2 and 3.

Deploy

ng build --target=production --base-href '/myapp/'

References

[1] Github - Angular CLI

https://github.com/angular/angular-cli

[2] StackOverflow - How to config different development environment in angular 2 app

http://stackoverflow.com/questions/36004810/how-to-config-different-development-environment-in-angular-2-app

[3] Shayne Boywer: Angular CLI using the environment option

http://tattoocoder.com/angular-cli-using-the-environment-option/

[4] Angular 2 - Architecture

https://angular.io/docs/ts/latest/guide/architecture.html

Thoughtram - Understanding @Injectable in Angular

https://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html

How to Tell Time in Java’s Garbage Collection

I found this interesting article¹ on clock drifts and hardware clocks and OS clocks and Java and logging.

I really liked the quote in there:

“A person with a watch knows what time it is. A person with two watches is never sure.”

- Segal's Law

References

[1] How to Tell Time in Java’s Garbage Collection

https://devblogs.microsoft.com/java/how-to-tell-time-in-javas-garbage-collection/

Creating a global .gitignore file

It's possible to create a global .gitignore file¹ that is automatically shared among all your repositories.

Why should I do this in the first place? Well, there are a couple of reasons.

One example is of course, I want the same rules to apply to all my repositories.

But, in my case, at work, we are actually using Subversion and not Git. But I do use Git.

And I do not want to pollute the entire Subversion repository with my .gitignore files.

So for me, this is a valid solution.

Let's check that I do not already have this configuration setting active:

git config --list
user.name=Mr. Bear
user.email=mrbear@bears.com
svn.rmdir=true
alias.co=checkout
core.excludesfile=/home/mrbear/.gitignore_global
core.autocrlf=input
core.ignorecase=false

You'll notice that among my properties, I already have a core.excludesfile=/home/mrbear/.gitignore_global.

I added it as follows:

$ git config --global core.excludesfile ~/.gitignore_global

Than just populate it like you do with any .gitignore file.

References

[1] Docs github.com - Configuring ignored files for all repositories on your computer

https://docs.github.com/en/github/using-git/ignoring-files#create-a-global-gitignore