Posts Angular v8.x with nodeJS - hello world
Post
Cancel

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 (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 : jsnpm install -g @angular/cli

more

6-@ CMD > Install Typescript globally via : ```jsnpm install -g typescript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<span style="color: #ff0000;">7</span>-Create a new folder c:\angularHelloWorld 
Fire up VSCodium by menu, choose > File > Open Folder > point c:\angularHelloWorld

<span style="color: #ff0000;">8</span>-At VSCodium by menu, choose > Terminal > New Terminal > type :
```jsng 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 
```jsnpm install``` 

to retry download the needed files!

<span style="color: #ff0000;">9</span>-use 
```js
//(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!

<span style="color: #ff0000;">10</span>-later, build for production
```js
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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//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

1
2
3
//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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//src - https://stackoverflow.com/a/43780004
"update.channel": "none"```

**VSCodium - Disable git check**
File > Preferences > Settings > User Settings add :
```js
//https://stackoverflow.com/a/33946918
"git.enabled": false```

**VSCodium - Open files always in a new tab**
File > Preferences > Settings > User Settings add :
```js
//src - https://stackoverflow.com/a/45431612
"workbench.editor.enablePreview": false```

**For the new VSCode versions** 
Ctrl+Shift+P > Configure Language Specific Settings > Typescript
```js
//overall
{
    "window.zoomLevel": 0,
    "update.mode": "none",
    "git.enabled": false,
    "[typescript]": {

    }
}

VSCodium - format code jsSHIFT + 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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//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](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

```js
@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</string,>

origin - https://www.pipiscrew.com/?p=15022 angular-v8-x-with-nodejs-hello-world

This post is licensed under CC BY 4.0 by the author.
Contents

Trending Tags