WML Schematics

The Angular WML Schematics library serves as a foundational toolkit for Angular web application development, establishing a solid baseline from which developers can construct and expand their projects. Central to this library is the concept of WMLUIProperty, a fundamental element that encapsulates the essence of web application components, down to the finest detail. This library not only streamlines the development process by providing pre-defined subclasses like WMLRoute for routing, WMLView for dynamic components, and WMLMotionUIProperty for CSS animations and transitions but also ensures consistency and scalability across your application. Dive into the documentation to explore how these building blocks can be orchestrated to create robust, maintainable, and dynamic web applications.

Installation

npm install -s --verbose @windmillcode/angular-wml-schematics

Usage

As you follow along close each terminal and open a new one so you can start in root

To create a layout

cd src/app/layouts
npx ng g @windmillcode/angular-wml-schematics:component --name=custom-layout --routing=true --route=layout --routes-file-path=src/app/app.routes.ts --standalone=true --cpnt-type=default

then navigate to the layout route and check for the element in dev tools you will need to add a router-outlet

To create a page

cd src/app/pages
npx ng g @windmillcode/angular-wml-schematics:component --name=custom-page --route-key=upload  --route=page  --routes-file-path=src/app/app.routes.ts --standalone=true --cpnt-type=default

you would first create a layout then the page then add the page as a child of the layout route

To create a container component

cd src/app/shared/components
npx ng g @windmillcode/angular-wml-schematics:component --name container-zero  --is-props-child=true  --module=shared --is-page-module=false

To make a service

cd src/app/shared/services
npx ng g @windmillcode/angular-wml-schematics:service --name custom

To create a service method

cd src/app/shared/services/custom
npx ng g @windmillcode/angular-wml-schematics:service-method --name getJsonData --service-name custom --api-route="/v2/list.json" --http-method get

To create a form

You will need a component and service to exist

cd src/app/shared/components/container-zero
npx ng g @windmillcode/angular-wml-schematics:form --api-call this.customService.getJsonData --fields firstName  lastName address

**Open A New terminal to try out the commands and see how the project gets updated

References

template-component Schematic

Property	Type	Description
name	string	Specifies the name of the component.
path	string	The path where the new component will be generated.
project	string	The name of the Angular project within which the component should be created.
cpntType	string	Determines the type of component to generate. Options include `default`, `library`, `default-zero`, and `library-zero`.
isIdIncluded	boolean	Indicates whether the component selector should include an ID. Defaults to `true`.
isPropsChild	boolean	Specifies whether the component is a presentation or a container.
standalone	boolean	Indicates whether the generated component is standalone. Defaults to `false`.
styleType	string	Specifies the preset SCSS style to use. Options include `type0`, `type1`, and `none`. Default is `none`.
routing	boolean	Indicates whether to create a routing module. Defaults to `false`.
routeKey	string	The route that gets added to the innerNav.urls object in the environment.dev.ts file.
route	string	The route path for a lazy-loaded module.
routesFilePath	string	Path for routes when using new routing configurations in Angular 17.
module	string	The declaring NgModule.
isPageModule	boolean	Whether the component is a page or not.

template-form Schematic

Property	Type	Description
name	string	The name of the form.
apiCall	string	Specifies the API call function that will be triggered upon form submission.
apiCallClass	string	Specifies the class for the API call’s argument.
path	string	The path where the new form-related code will be generated.
fields	string[]	An array of strings representing the field names within the form.
fieldType	string	Determines whether the fields are `simple` or `complex`. Default is `simple`.

template-library Schematic

Property	Type	Description
name	string	Specifies the name of the library.
path	string	The path where the library should be created.
entryFile	string	Designates the main entry point of the library. Typically a file like `public-api.ts`.
dest	string	The destination directory where the build artifacts of the library will be placed.
project	string	The Angular project within which the library will be created.

template-module Schematic

Property	Type	Description
name	string	The name of the module to be created.
path	string	Specifies the directory path where the new module will be generated.
project	string	Identifies the project within which the module will be created.
flat	boolean	Prevents the creation of a new folder for the module if set to `true`. Defaults to `false`.
routing	boolean	Indicates that a routing module should be generated alongside the standard module. Defaults to `false`.
route	string	Allows specifying a route path that will be added to the nearest module’s routing configuration.
module	string	The path to the module file that will import the new module.

template-service Schematic

Property	Type	Description
name	string	Specifies the name of the service to be created.
path	string	The path where the new service will be generated.
project	string	Identifies the Angular project within which the service should be created.
flat	boolean	Indicates that the service file should be created directly inside the specified path without creating a new folder. Defaults to `false`.
skipTests	boolean	Skips the generation of a `.spec` file for the service if set to `true`. Defaults to `false`.

template-serviceMethod Schematic

Property	Type	Description
name	string	The name of the method to be added.
entityName	string	Name of the entity coming back from the server as page data or page rows. Default is `entity`.
envFilePath	string	The environment file to update.
serviceName	string	The name of the service class where the new method will be injected.
apiRoute	string	The HTTP API route.
scrollName	string	The name of the scrollPageObject if transformationType is `scrolling`. Default is `placeholder`.
path	string	The path where the service is.
transformationType	string	Determines whether to use regular transformation or page transformation. Default is `default`.
httpMethod	string	The HTTP method for the service method (get, post, put, patch, delete, options, head). Default is `post`.
useDataSourceStrategy	boolean	Indicates whether to use the datasource strategy for the service method. Default is `true`.

template-scroll Schematic

Property	Type	Description
name	string	The name of the scroll object.
path	string	The path where the target class is.
serviceFilePath	string	The path where the service is, to be passed to template-service-method schematic.
serviceMethodName	string	The name of the service method, to be passed to template-service-method schematic.
serviceMethodApiRoute	string	The HTTP API route, to be passed to template-service-method schematic.
serviceMethodEntityName	string	To be passed to template-service-method schematic, look up entityName definition there. Default is `entity`.
serviceMethodUseDataSourceStrategy	boolean	Whether to use the datasource strategy for the service method. Default is `true`.
createServiceMethod	boolean	Indicates whether to create the service method. Default is `true`.

Changelog

v18.1.3001 [8/4/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3002 [8/4/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3003 [8/5/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3003 [8/5/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3004 [8/5/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3005 [8/5/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3006 [8/5/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3007 [8/5/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.4000 [8/14/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.4001 [8/14/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.2.0 [8/15/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.2.1 [8/20/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.2.1000 [8/22/24]

updated package to reflect the version 18.2.1 of @angular/cli package

v18.2.2000 [8/30/24]

updated package to reflect the version 18.2.2 of @angular/cli package

v18.2.2100 [9/1/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.2.2101 [9/1/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.2.2200 [9/3/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.2.3000 [9/4/24]

updated package to reflect the version 18.2.3 of @angular/cli package

v18.2.3100 [9/8/24]

updated package to reflect the version 18.2.3 of @angular/cli package

v18.2.3112 [9/10/24]

[FIX] ensure new imports match to conform with @windmillcode/angular-wml-components-base@18.2.3110

v18.2.3200 [9/16/24]

updated package to conform with @windmillcode/wml-components-base

v18.2.4000 [9/16/24]

updated package to reflect the version 18.2.4 of @angular/cli package

v18.2.4100 [9/19/24]

updated package to reflect the version 18.2.4 of @angular/cli package

v18.2.4200 [9/21/24]

updated package to conform with @windmillcode/wml-components-base
[PATCH] ensured lint configraution gets added when creating a new library, tried to move the free and paid modules to the root folder of a library but only succcced in creating them in the addtl folder

v18.2.5000 [9/22/24]

updated package to reflect the version 18.2.5 of @angular/cli package

v18.2.5001 [9/22/24]

updated package to reflect the version 18.2.5 of @angular/cli package

v18.2.6000 [10/1/24]

updated package to reflect the version 18.2.6 of @angular/cli package

v18.2.7000 [10/2/24]

updated package to reflect the version 18.2.7 of @angular/cli package

v18.2.7001 [10/6/24]

updated package to conform with @windmillcode/wml-components-base

v18.2.7010 [10/9/2024 11:27:56 AM EST]

[UPDATE] projects/wml-schematics/schematics/template-service-method/index.ts updated url method in the WMLEndpoint to use backendURI0.fqdn from WMLUri class of @windmillcode/wml-components-base instead of backendDomain0. If you’re using this, just know the URLs are now built using fqdn for more flexibility.And future project templates now use WMLUri and backendURI0 to reference to uri representation of the server

v18.2.7020 [10/10/24]

updated package to conform with @windmillcode/wml-components-base

v18.2.8000 [10/10/24]

updated package to reflect the version 18.2.8 of @angular/cli package

v18.2.8000 [10/11/24]

updated package to reflect the version 18.2.8 of @angular/cli package

v18.2.8001 [10/11/24]

updated package to conform with @windmillcode/wml-components-base

v18.2.9000 [10/23/24]

updated package to conform with @windmillcode/wml-components-base

v18.2.10000 [10/31/24]

updated package to conform with @windmillcode/wml-components-base

v18.2.11000 [11/7/24]

updated package to conform with @windmillcode/wml-components-base

v18.2.12000 [11/15/24]

updated package to conform with @windmillcode/wml-components-base

v18.2.12001 [11/17/24]

updated package to conform with @windmillcode/wml-components-base

v19.0.4 [11/19/24]

updated package to conform with @windmillcode/wml-components-base
[FIX] -fixed a in template component to match the new standalone logic
by default standalone is true and the SharedModule should be imported
if its false then its specified

v19.0.1000 [11/26/24]

updated package to conform with @windmillcode/wml-components-base

v19.0.2000 [12/4/24]

updated package to reflect the version 19.0.2 of @angular/cli package

v19.0.3000 [12/6/24]

updated package to reflect the version 19.0.3 of @angular/cli package

v19.0.4000 [12/12/24]

updated package to reflect the version 19.0.4 of @angular/cli package

v19.0.5000 [12/19/24]

updated package to reflect the version 19.0.5 of @angular/cli package

v19.0.5001 [12/27/24]

[PATCH] fixed an issue to where layout components where not being generated. For you you need to manually add the layout componennt to the routes file. Also add —is-layout=true accordingly
new way to make layout components

npx ng g @windmillcode/angular-wml-schematics:component --name=default-zero-layout  --routing=true --route="" --routes-file-path=src/app/app.routes.ts --standalone=true --cpnt-type=default --is-layout=true

v19.0.5100 [12/29/24]

[BREAKING CHANGE]- updated components to be more compliant with SCSS 3.0 features and removed common.scss from consumer components all scss from common.scss can now be found in global.scss

v19.0.5100 [12/29/24]

updated package to conform with @windmillcode/wml-components-base

v19.0.5101 [1/4/25]

updated <%= classify(name) %>Props.setState so that a value is not needed to update the state

v19.0.6000 [1/12/25]

updated package to reflect the version 19.0.6 of @angular/cli package

v19.0.7000 [1/16/25]

updated package to reflect the version 19.0.7 of @angular/cli package

v19.1.0 [1/17/25]

updated package to reflect the version 19.1.0 of @angular/cli package

v19.1.1000 [1/17/25]

updated package to reflect the version 19.1.1 of @angular/cli package

v19.1.2000 [1/23/25]

updated package to reflect the version 19.1.2 of @angular/cli package

v19.1.3000 [1/23/25]

updated package to reflect the version 19.1.3 of @angular/cli package

v19.1.3100 [1/23/25]

update package to support the react native ecosystem

v19.1.3111 [1/27/25]

updated package to conform with @windmillcode/wml-components-base

v19.1.3112 [1/28/25]

updated package to conform with @windmillcode/wml-components-base

v19.1.4000 [1/31/25]

updated package to reflect the version 19.1.4 of @angular/cli package

v19.1.5000 [2/8/25]

updated package to reflect the version 19.1.5 of @angular/cli package

v19.1.6000 [2/13/25]

updated package to reflect the version 19.1.6 of @angular/cli package

v19.1.7000 [2/21/25]

updated package to reflect the version 19.1.7 of @angular/cli package

v19.1.8000 [3/4/25]

updated package to reflect the version 19.1.8 of @angular/cli package

v19.2.1000 [3/9/25]

updated package to reflect the version 19.2.1 of @angular/cli package

v19.2.2000 [3/15/25]

updated package to reflect the version 19.2.2 of @angular/cli package

v19.2.3000 [3/21/25]

updated package to reflect the version 19.2.3 of @angular/cli package

v19.2.4000 [3/27/25]

updated package to reflect the version 19.2.4 of @angular/cli package

v19.2.5000 [4/3/25]

updated package to reflect the version 19.2.5 of @angular/cli package

v19.2.5001 [4/6/25]

updated package to conform with @windmillcode/wml-components-base

v19.2.5100 [4/10/25]

updated package to conform with @windmillcode/wml-components-base

v19.2.6000 [4/10/25]

updated package to conform with @windmillcode/wml-components-base

v19.2.7000 [4/21/25]

updated package to conform with @windmillcode/wml-components-base

v19.2.8000 [4/24/25]

updated package to reflect the version 19.2.8 of @angular/cli package

v19.2.9000 [5/1/25]

updated package to reflect the version 19.2.9 of @angular/cli package

v19.2.10000 [5/8/25]

updated package to reflect the version 19.2.10 of @angular/cli package

v19.2.11000 [5/15/25]

updated package to reflect the version 19.2.11 of @angular/cli package

v19.2.12000 [5/22/25]

updated package to reflect the version 19.2.12 of @angular/cli package

v19.2.13000 [5/24/25]

updated package to reflect the version 19.2.13 of @angular/cli package

v19.2.14000 [5/28/25]

updated package to reflect the version 19.2.14 of @angular/cli package