Angular v8.x with nodeJS - hello world

Costas · Mar 16, 2020

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 VSCodium-win32-ia32-x.xx.x.zip to c:\dev.

3-Download nodeJSx86 > choose version > the node-v?-win-x86.7z archive (Angular CLI 8.0+ needs nodeJS 10.9 or greater)

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
patheditor2.zip\releases\2\e25e0ef6-2b55-4d30-b469-a2deaeb5220d

to
c:\dev\PathEditor.exe

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

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

JavaScript:

npm install -g @angular/cli

more

6-@ CMD > Install Typescript globally via :

JavaScript:

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 :

JavaScript:

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

JavaScript:

npm install

to retry download the needed files!

9-use

JavaScript:

//(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

JavaScript:

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

//or

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 - https://stackblitz.com/edit/angular-8-reactive-form-validation

JavaScript:

//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
https://update.angular.io/

//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

//in Angular v9+ if you getting
//This is probably not a problem, but may cause the compilation of entry points to be out of order
//ERROR in The target entry-point "@pipiscrew/template-angular" has missing dependencies
//
//by angular v9 uses Ivy compiler by default. You have to disable it @ tsconfig.app.json by appending
  "angularCompilerOptions": {
    "enableIvy": false
  }

Templates
AdminLTE for Angular v4+ - https://www.npmjs.com/package/angular-admin-lte or at github
akveo.ngx-admin - https://akveo.github.io/ngx-admin/
SB Admin Bootstrap 4 Angular 8 - https://startangular.com/product/sb-admin-bootstrap-4-angular-8/ or at github
CoreUI - https://github.com/coreui/coreui-free-angular-admin-template
PrimeNG UI components - https://www.primefaces.org

python requirement comes from node-gyp

VSCodium - Disable decoration warnings
Set the 'experimentalDecorators' option to remove this warning.
yourPRJ/tsconfig.app.json add

JavaScript:

//src - https://ihatetomatoes.net/how-to-remove-experimentaldecorators-warning-in-vscode/
  "compilerOptions": {
    "experimentalDecorators": true,

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

JavaScript:

//src - https://stackoverflow.com/a/43780004
"update.channel": "none"

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

JavaScript:

//https://stackoverflow.com/a/33946918
"git.enabled": false

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

JavaScript:

//src - https://stackoverflow.com/a/45431612
"workbench.editor.enablePreview": false

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

JavaScript:

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

VSCodium - format code

JavaScript:

SHIFT + ALT + F

Rico's vscode config

sample Object.assign w/ patchValue - https://stackblitz.com/edit/angular-b7nmbf
sample create multicheckboxes object compatible with WebAPI Dictionary<string, bool> - https://stackblitz.com/edit/angular-9mskf4
sample Dynamic form generator - https://stackblitz.com/edit/angular-dynamic-form-builder
pattern fill select - https://coryrylan.com/blog/creating-a-dynamic-select-with-angular-forms
bootstrap loader indicator - https://stackblitz.com/edit/angular-dzygaa

node_modules
node_modules problem - https://dev.to/leoat12/the-nodemodules-problem-29dc
npm pnpm - pnpm
npm fyn - https://www.npmjs.com/package/fyn
understanding npm-link - https://medium.com/dailyjs/how-to-use-npm-link-7375b6219557 mirror
npm link in nutshell - http://chevtek.io/you-can-finally-npm-link-packages-that-contain-peer-dependencies/

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

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

JavaScript:

//https://github.com/browserslist/browserslist#debug
//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

https://github.com/pipiscrew/angular2_small_prjs/tree/master/angular8_with_php_canactivate_%2B_retain_PHPSessionCookie

Backup source files of an Angular project excluding node_modules

JavaScript:

@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"
 
pause

Angular v8.0.3 with ng-bootstrap boilerplate (17mb)
http://www.mediafire.com/file/dgp05oo6skc7i8i/angular803_ng-bootstrap432_boilerplate.7z

Handsontable - Handsontable for Angular - Load and save example ng2-handsontable wrapper unofficial
Ornamentum data table - github
ACPaaS UI Smart Table Widget (Angular)
AgTable

Angular v8.x with nodeJS - hello world

Costas

Administrator