run `dotnet new angular` to make a full stack under reactive forms

BryanWilhite commented 3 years ago

this sample represents a leading reason why my Studio would build with Angular: reactive forms

[x] upgrade to the latest Angular
[x] install Akita [ :octocat: GitHub ] and migrate existing StackBlitz sample
[x] install formly schematics and replace reactive form statements with JSON
[x] use Bootstrap theme to build the form (because of Microsoft defaults)
[x] use json-server [ :octocat: GitHub] to drive the form at design time
[x] define an API endpoint (FormlyController) returning JSON to dynamically generate an Angular reactive form with validation
[ ] add FluentValidation on the server side
[ ] add ASP.NET versioning [📦 NuGet]
[ ] add some flavor of anti-bot CAPTCHA — ng-recaptcha [ :octocat: GitHub] or ngx-captcha [ :octocat: GitHub]
[ ] use Bootstrap tabs with only one tab enabled to show wizard progress
[ ] use a drop down in the form which will show/hide other form controls
[ ] try to use a server-side, in-memory session to cache incomplete form data

Extras:

[ ] add Electron.net and run from the Desktop
[ ] use a server-side Dictionary<string, string> to pass key-value pairs to a client side { [key: string]: string }
[ ] add client-side form-validation tests
[ ] use spread syntax for updating data incrementally
[ ] make the Angular app themable with CSS variables
[ ] add a utility window to show the state of server-side form data in the cache

BryanWilhite commented 3 years ago

the dynamic JSON stuff leads me to a world populated with formly [ 📖 docs] and form.io [ :octocat: GitHub ]

i am leaning toward form.io in part because it has Material Design support: https://github.com/formio/angular-material-formio

📖 https://stackoverflow.com/questions/54384642/how-to-implement-dynamic-form-rendering-in-angular-using-an-json-schema

BryanWilhite commented 3 years ago

today (and a few days earlier) i am leaning toward formly because it supports Material Design, Bootstrap, etc.: https://formly.dev/ui/bootstrap

also formly is not positioning itself toward becoming an enterprise-scale ecosystem

BryanWilhite commented 3 years ago

for json-server intro check out:

BryanWilhite commented 3 years ago

ng update migrations (nice):

$ npx ng update @angular/core@9 @angular/cli@9

The installed Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 39 dependencies.
Fetching dependency metadata from registry...
                  Package "@angular/compiler-cli" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/animations" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/common" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/compiler" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/core" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/forms" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/platform-browser" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/platform-browser-dynamic" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/platform-server" has a missing peer dependency of "tslib" @ "^1.10.0".
                  Package "@angular/router" has a missing peer dependency of "tslib" @ "^1.10.0".
    Updating package.json with dependency @angular-devkit/build-angular @ "0.901.14" (was "0.803.29")...
    Updating package.json with dependency @angular/cli @ "9.1.14" (was "8.3.29")...
    Updating package.json with dependency @angular/compiler-cli @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/language-service @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency typescript @ "3.8.3" (was "3.5.3")...
    Updating package.json with dependency @angular/animations @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/common @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/compiler @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/core @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/forms @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/platform-browser @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/platform-server @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/router @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency zone.js @ "0.10.3" (was "0.9.1")...
  UPDATE package.json (1711 bytes)
✔ Packages installed successfully.
** Executing migrations of package '@angular/cli' **

▸ Angular Workspace migration.
  Update an Angular CLI workspace to version 9.
  UPDATE angular.json (4518 bytes)
  UPDATE src/tsconfig.app.json (210 bytes)
  UPDATE src/tsconfig.server.json (264 bytes)
  UPDATE package.json (1737 bytes)
  UPDATE src/main.ts (651 bytes)
✔ Packages installed successfully.
  Migration completed.

▸ Lazy loading syntax migration.
  Update lazy loading syntax to use dynamic imports.
  Migration completed.

▸ Replace deprecated 'styleext' and 'spec' Angular schematic options.
  Migration completed.

** Executing migrations of package '@angular/core' **

▸ Static flag migration.
  Removes the `static` flag from dynamic queries.
  As of Angular 9, the "static" flag defaults to false and is no longer required for your view and content queries.
  Read more about this here: https://v9.angular.io/guide/migration-dynamic-flag
  Migration completed.

▸ Missing @Injectable and incomplete provider definition migration.
  In Angular 9, enforcement of @Injectable decorators for DI is a bit stricter and incomplete provider definitions behave differently.
  Read more about this here: https://v9.angular.io/guide/migration-injectable
  Migration completed.

▸ ModuleWithProviders migration.
  In Angular 9, the ModuleWithProviders type without a generic has been deprecated.
  This migration adds the generic where it is missing.
  Read more about this here: https://v9.angular.io/guide/migration-module-with-providers
  Migration completed.

▸ Renderer to Renderer2 migration.
  As of Angular 9, the Renderer class is no longer available.
  Renderer2 should be used instead.
  Read more about this here: https://v9.angular.io/guide/migration-renderer
  Migration completed.

▸ Undecorated classes with decorated fields migration.
  As of Angular 9, it is no longer supported to have Angular field decorators on a class that does not have an Angular decorator.
  Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes
  Migration completed.

▸ Undecorated classes with DI migration.
  As of Angular 9, it is no longer supported to use Angular DI on a class that does not have an Angular decorator.
  Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes
  Migration completed.

Your project has been updated to Angular version 9!
For more info, please see: https://v9.angular.io/guide/updating-to-version-9

BryanWilhite commented 3 years ago

expected ng build error:

$ npm run build

> songhay.angularforms@0.0.0 build
> npx ng build

Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @nguniversal/module-map-ngfactory-loader : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/platform-server : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Compiling @angular/platform-server/testing : es2015 as esm2015
Generating ES5 bundles for differential loading...
An unhandled exception occurred: ~/dotnet-core/dotnet-web-mvc-angular-forms/Songhay.AngularForms/Songhay.AngularForms/ClientApp/vendor-es2015.js: 'with' in strict mode (139584:4)

  139582 |   Window_run: function _run(code, file) {
  139583 |     if (file) code += '\n//@ sourceURL=' + file;
> 139584 |     with(this) eval(code);
         |     ^
  139585 |   },
  139586 |   EventHandlerBuilder_build: function build() {
  139587 |     try {
See "/tmp/ng-bs7Jw4/angular-errors.log" for further details.
npm ERR! code 127
npm ERR! path ~/dotnet-core/dotnet-web-mvc-angular-forms/Songhay.AngularForms/Songhay.AngularForms/ClientApp
npm ERR! command failed
npm ERR! command sh -c npx ng build

npm ERR! A complete log of this run can be found in:
npm ERR!     ~/.npm/_logs/2021-02-16T04_32_34_451Z-debug.log

from https://jasontaylor.dev/asp-net-core-angular-9-upgrade/ :

You can learn more about this issue here. However to resolve this issue, simply remove the following line from ClientApp/src/main.ts:

export { renderModule, renderModuleFactory } from '@angular/platform-server';

BryanWilhite commented 3 years ago

unexpected runtime error:

$ dotnet run --project Songhay.AngularForms/Songhay.AngularForms/Songhay.AngularForms.csproj
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: ~/sourceRoot/dotnet-core/dotnet-web-mvc-angular-forms/Songhay.AngularForms/Songhay.AngularForms
fail: Microsoft.AspNetCore.SpaServices[0]
      Error from chokidar (~/sourceRoot/dotnet-core/dotnet-web-mvc-angular-forms/Songhay.AngularForms/Songhay.AngularForms/ClientApp/src/$$_lazy_route_resource): Error: ENOSPC: System limit for number of file watchers reached, watch '~/sourceRoot/dotnet-core/dotnet-web-mvc-angular-forms/Songhay.AngularForms/Songhay.AngularForms/ClientApp/src'

fail: Microsoft.AspNetCore.SpaServices[0]
      Error from chokidar (~/sourceRoot/dotnet-core/dotnet-web-mvc-angular-forms/Songhay.AngularForms/Songhay.AngularForms/ClientApp/node_modules/@angular/common/__ivy_ngcc__/fesm2015): Error: ENOSPC: System limit for number of file watchers reached, watch '~/sourceRoot/dotnet-core/dotnet-web-mvc-angular-forms/Songhay.AngularForms/Songhay.AngularForms/ClientApp/node_modules/@angular/common/__ivy_ngcc__/fesm2015'

BryanWilhite commented 3 years ago

unexpected upgrade error:

$ npx ng update @angular/core@10 @angular/cli@10
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 40 dependencies.
Fetching dependency metadata from registry...
                  Package "@nguniversal/module-map-ngfactory-loader" has an incompatible peer dependency to "@angular/common" (requires "^8.0.0" (extended), would install "10.2.4").
                  Package "@nguniversal/module-map-ngfactory-loader" has an incompatible peer dependency to "@angular/core" (requires "^8.0.0" (extended), would install "10.2.4").
                  Package "@nguniversal/module-map-ngfactory-loader" has an incompatible peer dependency to "@angular/platform-server" (requires "^8.0.0" (extended), would install "10.2.4").
✖ Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
  See "/tmp/ng-Sfwjdn/angular-errors.log" for further details.

npm ERR! code 1
npm ERR! path ~/sourceRoot/dotnet-core/dotnet-web-mvc-angular-forms/Songhay.AngularForms/Songhay.AngularForms/ClientApp
npm ERR! command failed
npm ERR! command sh -c ng "update" "@angular/core@10" "@angular/cli@10"

npm ERR! A complete log of this run can be found in:
npm ERR!     ~/.npm/_logs/2021-02-16T05_03_59_340Z-debug.log

i will attempt to uninstall @nguniversal/module-map-ngfactory-loader but comments for an Angular Universal issue suggests to me that it is just possible that SSR feature(s) depends on this package

BryanWilhite commented 3 years ago

ng update migrations (@10):

$ npx ng update @angular/core@10 @angular/cli@10
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 39 dependencies.
Fetching dependency metadata from registry...
    Updating package.json with dependency @angular-devkit/build-angular @ "0.1002.2" (was "0.901.14")...
    Updating package.json with dependency @angular/cli @ "10.2.2" (was "9.1.14")...
    Updating package.json with dependency @angular/compiler-cli @ "10.2.4" (was "9.1.13")...
    Updating package.json with dependency @angular/language-service @ "10.2.4" (was "9.1.13")...
    Updating package.json with dependency typescript @ "4.0.7" (was "3.8.3")...
    Updating package.json with dependency @angular/animations @ "10.2.4" (was "9.1.13")...
    Updating package.json with dependency @angular/common @ "10.2.4" (was "9.1.13")...
    Updating package.json with dependency @angular/compiler @ "10.2.4" (was "9.1.13")...
    Updating package.json with dependency @angular/core @ "10.2.4" (was "9.1.13")...
    Updating package.json with dependency @angular/forms @ "10.2.4" (was "9.1.13")...
    Updating package.json with dependency @angular/platform-browser @ "10.2.4" (was "9.1.13")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "10.2.4" (was "9.1.13")...
    Updating package.json with dependency @angular/platform-server @ "10.2.4" (was "9.1.13")...
    Updating package.json with dependency @angular/router @ "10.2.4" (was "9.1.13")...
  UPDATE package.json (1679 bytes)
✔ Packages installed successfully.
** Executing migrations of package '@angular/cli' **

▸ Update Browserslist configuration file name to '.browserslistrc' from deprecated 'browserslist'.
  RENAME browserslist => .browserslistrc
  Migration completed.

▸ Update tslint to version 6 and adjust rules to maintain existing behavior.
    tslint configuration does not extend "tslint:recommended" or it extends multiple configurations.
    Skipping rule changes as some rules might conflict.
  UPDATE package.json (1679 bytes)
  UPDATE tslint.json (2894 bytes)
  Migration completed.

▸ Remove deprecated 'es5BrowserSupport' browser builder option.
  The inclusion for ES5 polyfills will be determined from the browsers listed in the browserslist configuration.
  Migration completed.

▸ Replace deprecated and removed 'styleext' and 'spec' Angular schematic options with 'style' and 'skipTests', respectively.
  Migration completed.

▸ Remove deprecated options from 'angular.json' that are no longer present in v10.
  UPDATE angular.json (4433 bytes)
  Migration completed.

▸ Add the tslint deprecation rule to tslint JSON configuration files.
  Migration completed.

▸ Update library projects to use tslib version 2 as a direct dependency.
  Read more about this here: https://v10.angular.io/guide/migration-update-libraries-tslib
  Migration completed.

▸ Update workspace dependencies to match a new v10 project.
  UPDATE package.json (1678 bytes)
✔ Packages installed successfully.
  Migration completed.

▸ Update 'module' and 'target' TypeScript compiler options.
  Read more about this here: https://v10.angular.io/guide/migration-update-module-and-target-compiler-options
    Unable to update 'e2e/tsconfig.json' target option from 'es5' to 'es2018': Could not read 'e2e/tsconfig.json'.
  UPDATE tsconfig.json (432 bytes)
  UPDATE src/tsconfig.server.json (262 bytes)
  Migration completed.

▸ Removing "Solution Style" TypeScript configuration file support.
    Migration has already been executed.
  Migration completed.

** Executing migrations of package '@angular/core' **

▸ Missing @Injectable and incomplete provider definition migration.
  As of Angular 9, enforcement of @Injectable decorators for DI is a bit stricter and incomplete provider definitions behave differently.
  Read more about this here: https://v9.angular.io/guide/migration-injectable
  Migration completed.

▸ ModuleWithProviders migration.
  As of Angular 10, the ModuleWithProviders type requires a generic.
  This migration adds the generic where it is missing.
  Read more about this here: https://v10.angular.io/guide/migration-module-with-providers
  Migration completed.

▸ Undecorated classes with Angular features migration.
  In version 10, classes that use Angular features and do not have an Angular decorator are no longer supported.
  Read more about this here: https://v10.angular.io/guide/migration-undecorated-classes
  Migration completed.

BryanWilhite commented 3 years ago

ng update migrations (@11):

$ npx ng update @angular/core@11 @angular/cli@11

The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 39 dependencies.
Fetching dependency metadata from registry...
    Updating package.json with dependency @angular-devkit/build-angular @ "0.1102.0" (was "0.1002.2")...
    Updating package.json with dependency @angular/cli @ "11.2.0" (was "10.2.2")...
    Updating package.json with dependency @angular/compiler-cli @ "11.2.0" (was "10.2.4")...
    Updating package.json with dependency @angular/language-service @ "11.2.0" (was "10.2.4")...
    Updating package.json with dependency karma @ "6.1.1" (was "5.0.2")...
    Updating package.json with dependency @angular/animations @ "11.2.0" (was "10.2.4")...
    Updating package.json with dependency @angular/common @ "11.2.0" (was "10.2.4")...
    Updating package.json with dependency @angular/compiler @ "11.2.0" (was "10.2.4")...
    Updating package.json with dependency @angular/core @ "11.2.0" (was "10.2.4")...
    Updating package.json with dependency @angular/forms @ "11.2.0" (was "10.2.4")...
    Updating package.json with dependency @angular/platform-browser @ "11.2.0" (was "10.2.4")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "11.2.0" (was "10.2.4")...
    Updating package.json with dependency @angular/platform-server @ "11.2.0" (was "10.2.4")...
    Updating package.json with dependency @angular/router @ "11.2.0" (was "10.2.4")...
  UPDATE package.json (1677 bytes)
✔ Packages installed successfully.
** Executing migrations of package '@angular/cli' **

▸ Replace deprecated library builder '@angular-devkit/build-ng-packagr'.
  Migration completed.

▸ Add 'declarationMap' compiler options for non production library builds.
  Migration completed.

▸ Remove deprecated options from 'angular.json' that are no longer present in v11.
  UPDATE angular.json (4365 bytes)
  Migration completed.

▸ Update workspace dependencies to match a new v11 project.
  UPDATE package.json (1678 bytes)
✔ Packages installed successfully.
  Migration completed.

** Executing migrations of package '@angular/core' **

▸ In Angular version 11, the type of `AbstractControl.parent` can be `null` to reflect the runtime value more accurately.
  This migration automatically adds non-null assertions to existing accesses of the `parent` property on types like `FormControl`, `FormArray` and `FormGroup`.
  Migration completed.

▸ ViewEncapsulation.Native has been removed as of Angular version 11.
  This migration replaces any usages with ViewEncapsulation.ShadowDom.
  Migration completed.

▸ NavigationExtras omissions migration.
  In version 11, some unsupported properties were omitted from the `extras` parameter of the `Router.navigateByUrl` and `Router.createUrlTree` methods.
  Migration completed.

▸ Updates the `initialNavigation` property for `RouterModule.forRoot`.
  Migration completed.

▸ NavigationExtras.preserveQueryParams has been removed as of Angular version 11.
   This migration replaces any usages with the appropriate assignment of the queryParamsHandling key.
  Migration completed.

▸ The default value for `relativeLinkResolution` is changing from 'legacy' to 'corrected'.
This migration updates `RouterModule` configurations that use the default value to 
now specifically use 'legacy' to prevent breakages when updating.
  UPDATE src/app/app.module.ts (1175 bytes)
  Migration completed.

▸ `async` to `waitForAsync` migration.
  The `async` testing function has been renamed to `waitForAsync` to avoid confusion with the native `async` keyword.
  UPDATE src/app/counter/counter.component.spec.ts (1117 bytes)
  Migration completed.

▸ Removes `canActivate` from a `Route` config when `redirectTo` is also present.
  Migration completed.

BryanWilhite commented 3 years ago

Wap.Builders.Formly.JsonPowered [ 📦 NuGet] [ :octocat: GitHub wiki] ) is a no go:

this builder design pattern thing is not attractive to me
there appears to be no support for formArray
the Builder adds IWapFieldGroup by default when adding IWapFormField should be an option

BryanWilhite commented 3 years ago

i have shown myself that System.Text.Json is faster than the Newtonsoft equivalents. It follows that I am removing this from the README:

add ASP.NET Core endpoint to emit formly JSON

The FormlyController.cs file adds an endpoint to emit formly JSON. The JArray of the famous Newtonsoft.Json package mixed with a C# anonymous object backs this endpoint, eliminating the need for whipping up a formal Model (in Model View Controller):

[HttpGet]
public JObject Get()
{
    var anon = new
    {
        componentSet = new
        {
            form1 = new
            {
                fields = JArray.Parse("[]").AddForm1Configuration(),
            },
            form2 = new
            {
                fields = JArray.Parse("[]").FillWithForm2Configuration(),
            },
            form3 = new
            {
                fields = JArray.Parse("[]").FillWithForm3Configuration(),
            },
        },
    };
    return JObject.FromObject(anon);
 }

We installed Newtonsoft.Json, from the dotnet-web-mvc-angular-forms/ folder:

dotnet add \
    Songhay.AngularForms/Songhay.AngularForms/Songhay.AngularForms.csproj \
    package Newtonsoft.Json

dotnet add \
    Songhay.AngularForms/Songhay.AngularForms/Songhay.AngularForms.csproj \
    package Microsoft.AspNetCore.Mvc.NewtonsoftJson

Notice that for ASP.NET Core 3 and above we also need the Microsoft.AspNetCore.Mvc.NewtonsoftJson package. For more detail on this issue, see “Why model binding to JObject from a request doesn’t work anymore in ASP.NET Core 3.1 and what’s the alternative?”

The AddForm*Configuration() and FillForm*Configuration() extension methods are defined in the JArrayExtensions.cs file. These extension methods of JArray act as builders of the fieldly JSON.

BryanWilhite / dotnet-core

run `dotnet new angular` to make a full stack under reactive forms #20

add ASP.NET Core endpoint to emit formly JSON