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

npm install -g @angular/cli

more

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!

9-use

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

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


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

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

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

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

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

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

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

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

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

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

 
 
VSCodium – format code

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

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

@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


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

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