NgsolidDevfest

-- Elewa presentation on Nairobi Devfest 2020

Installation instructions NgSolid inside of an NX project

All commands should be executed from root of parent NX project

1. Create all libraries using CLI

1.1. Node Libraries

ng g @nrwl/node:lib external/iote/bricks   
ng g @nrwl/node:lib external/ngfire/firestore-qbuilder

1.2. Angular Libraries (always pick scss)

ng g @nrwl/angular:lib external/iote/bricks-angular
ng g @nrwl/angular:lib external/iote/ui-workflows

ng g @nrwl/angular:lib external/ngfire/angular
ng g @nrwl/angular:lib external/ngfire/files
ng g @nrwl/angular:lib external/ngfire/time

TODO -- ng g @nrwl/node:lib external/ngfire/functions (not yet supported)

2. Delete everything below libs/external

rm -r libs/external

3. Add git submodule and move into external.

git submodule add https://github.com/iote/ngsolid-mono
git mv ngsolid-mono libs/external

Result should be a folder structure under external which is the same as before (this can sometimes need a couple more git mv's. Important though, never move this folder manually!)

4. Link up libraries

INSTALL NX PROPERLY USING THE PEER SNIPPETS

Swap out pathNames

In NX root tsconfig.json

"@proj-name/external/iote/bricks": [ "libs/external/iote/bricks/src/index.ts" ],
"@proj-name/external/ngfire/firestore-qbuilder": [ "libs/external/ngfire/firestore-qbuilder/src/index.ts" ],
"@proj-name/external/iote/bricks-angular": [ "libs/external/iote/bricks-angular/src/index.ts" ],
"@proj-name/external/ngfire/angular": [ "libs/external/ngfire/angular/src/index.ts" ],
"@proj-name/external/ngfire/time": [ "libs/external/ngfire/time/src/index.ts" ],
"@proj-name/external/ngfire/files": [ "libs/external/ngfire/files/src/index.ts" ],
"@proj-name/external/iote/ui-workflows": [ "libs/external/iote/ui-workflows/src/index.ts" ]

Change into

"@iote/bricks": [ "libs/external/iote/bricks/src/index.ts" ],
"@iote/bricks-angular": [ "libs/external/iote/bricks-angular/src/index.ts" ],
"@iote/ui-workflows": [ "libs/external/iote/ui-workflows/src/index.ts" ],
"@ngfire/firestore-qbuilder": [ "libs/external/ngfire/firestore-qbuilder/src/index.ts" ],
"@ngfire/angular": [ "libs/external/ngfire/angular/src/index.ts" ],
"@ngfire/time": [ "libs/external/ngfire/time/src/index.ts" ],
"@ngfire/files": [ "libs/external/ngfire/files/src/index.ts" ]

PRO TIP: By playing with this paths array, you can create as many namespaces for your libraries as you wish.

5. Angular Namespaces

In NX root angular.json, look for "prefix": "project-name-new",

CTRL+F and change this prefix-value to "iote" or "ngfire" depending on the lib. (only for external deps)

iote/ngsolid-devfest