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