Angular v8.x with nodeJS – hello world

currently tested on Win7x64 with :

  • VSCodium-win32-ia32-1.35.1
  • node-v12.4.0-win-x86 (npm v6.9)
  • angular/cli@8.0.3
  • typescript@3.5.2

1-Login to windows!

2-Download VSCodium_x86 or VSCode
extract the to c:\dev.

3-Download nodeJSx86 > choose version > the node-v?-win-x86.7z archive

extract it to c:\dev\node

4-Because we didnt download nodeJS installer we have to set the nodeJS to Path Environment, so will be accessible from any directory.

This can be done from Control Panel > System > Advanced system settings > Environment variables

or for your easiness download PathEditor2

extract&rename the\releases\2\e25e0ef6-2b55-4d30-b469-a2deaeb5220d


fire up > @ top grid (user), add > choose the c:\dev\node folder > close the app

5-@ CMD > Install Angular CLI to node globally via :

npm install -g @angular/cli


6-@ CMD > Install Typescript globally via :

npm install -g typescript

//to install specific version include @
npm install lodash@4.17.4

7-Create a new folder c:\angularHelloWorld
Fire up VSCodium by menu, choose > File > Open Folder > point c:\angularHelloWorld

8-At VSCodium by menu, choose > Terminal > New Terminal > type :

ng new helloworld

and press enter, will generate & download all the needed files!

Angular will create a new folder (aka c:\angularHelloWorld\helloworld) , as you are @ VSCodium > Terminal > go to helloworld folder via :
cd helloworld

if you have any internet connection problem, use

npm install

to retry download the needed files!


//(and no ng serve) to execute the predefined -> PRJ\package.json > "start":
npm start

You will get
** Angular Live Development Server is listening on localhost:4200, open your browser on hxxp://localhost:4200/ **

browse there to see the helloworld!

10-later, build for production

ng build --prod --base-href /subfolder/


npm run build

webpack – Tree Shaking

to check the tools version use :
[node] node -v
[node npm] npm -v
[angular] ng version
[typescript] tsc -version

Angular Fiddler –

//lists the modules installed globally
npm list --global

//execute it where the package.json is, flag --depth=0 to list only top-level packages
npm list --depth=0 

//clear cache, if doesn't work, manually delete %appdata%\npm-cache folder
npm cache clean --force

//if you getting python or node-gyp errors, just leave only the necessary at package.json at devDependencies section
//(according to your angular version), ex :
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular-devkit/build-ng-packagr": "~0.13.0",
    "@angular/cli": "~7.3.0",
    "@angular/compiler-cli": "^7.2.3"

//update guide from angular version to version

//uninstall package (ex webpack)
npm uninstall -g webpack
npm uninstall webpack

//install package and save it also to package.json
npm install my_dep --save     //for dependencies tree
npm install my_dep --save-dev //for devDependencies tree


AdminLTE for Angular v4+ – or at github
akveo.ngx-admin –
SB Admin Bootstrap 4 Angular 8 – or at github
CoreUI –
PrimeNG UI components –

python requirement comes from node-gyp

VSCodium – Disable decoration warnings
Set the ‘experimentalDecorators’ option to remove this warning.
yourPRJ/ add

//src -
  "compilerOptions": {
    "experimentalDecorators": true,

VSCodium – Disable check for update
File > Preferences > Settings > User Settings add :

//src -
"": "none"

VSCodium – Disable git check
File > Preferences > Settings > User Settings add :

"git.enabled": false

VSCodium – Open files always in a new tab
File > Preferences > Settings > User Settings add :

//src -
"workbench.editor.enablePreview": false

For the new VSCode versions
Ctrl+Shift+P > Configure Language Specific Settings > Typescript

    "window.zoomLevel": 0,
    "update.mode": "none",
    "git.enabled": false,
    "[typescript]": {

VSCodium – format code


Rico’s vscode config



sample Object.assign w/ patchValue –
sample create multicheckboxes object compatible with WebAPI Dictionary
sample Dynamic form generator –
pattern fill select –
bootstrap loader indicator –


node_modules problem –
npm pnpm – pnpm
npm fyn –
understanding npm-link –     mirror
npm link in nutshell –

When build for prod, stop generate *-es5*.js files

go to browserslist file that is near package.json make sure has only :

//If you want to reduce config files in project root, you can specify browsers in package.json with browserslist key
chrome 62

angular8 with php canactivate + retain PHPSession cookie – use angular with PHP server secure calls


Backup source files of an Angular project excluding node_modules

@echo off

set YYYYMMDD=%DATE:~10,4%%DATE:~7,2%%DATE:~4,2%_%time:~0,2%%time:~3,2%%time:~6,2%
cd /d %ProgramFiles%\WinRAR\
rar.exe a -ep1 -r "%~dp0\%YYYYMMDD%" -x*node_modules -x*.bat -x*.rar -x*.zip -x*.7z "%~dp0"


Angular v8.0.3 with ng-bootstrap boilerplate (17mb)

HandsontableHandsontable for AngularLoad and save example     ng2-handsontable wrapper unofficial
Ornamentum data tablegithub
ACPaaS UI Smart Table Widget (Angular)

By: |18/06/2019|categories: /