![Page 1: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/1.jpg)
ManfredSteyer
Custom Schematics and CLI: An Angular Application by the push of a Button
Manfred Steyer
SOFTWAREarchitekt.at
ManfredSteyer
![Page 2: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/2.jpg)
ManfredSteyer
About me…
• Manfred Steyer
• Blog: SOFTWAREarchitekt.at
• Angular Trainings and Consultancy
• Google Developer Expert (GDE)
Page ▪ 3
Manfred Steyer
![Page 3: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/3.jpg)
ManfredSteyer
Have you ever tried to …
… setup a modern JavaScript project manually?
• Compiler/ Transpiler
• Package manager and packages
• Build chain optimized for bundle size, performance, etc.
• Testing tools including code coverage
• Linting tools
![Page 4: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/4.jpg)
ManfredSteyer
Angular CLI
![Page 5: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/5.jpg)
ManfredSteyer
Using the CLI
ng new my-project
cd my-project
ng generate component my-component
![Page 6: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/6.jpg)
ManfredSteyer
Vision
ng new my-project --collection my-special-templ
cd my-project
ng generate my:menu-component side-menu
![Page 7: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/7.jpg)
ManfredSteyer
Contents
• What is Schematics?
• How to create custom schematics?
• How to use parameters?
• How to use templates?
• How to scaffold whole projects?
![Page 8: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/8.jpg)
ManfredSteyer
What is Schematics?
![Page 9: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/9.jpg)
ManfredSteyer
Schematics
Scaffolding Tool used by Angular CLI
Schematics: The whole project
Schematic: Code Generator
Collection: Set of Schematics
![Page 10: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/10.jpg)
ManfredSteyer
Angular Labs
Experimental :: Breaking Changes ahead
Give it a try!
![Page 11: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/11.jpg)
ManfredSteyer
Nrwl Nx
![Page 12: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/12.jpg)
ManfredSteyer
![Page 13: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/13.jpg)
ManfredSteyer
Schematics are atomic (like db transactions)
AB
D
E
C F
AB
D
E
C F
Your Project Staging AreaTree Object
![Page 14: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/14.jpg)
ManfredSteyer
Schematics are atomic (like db transactions)
AB
D
E
C F
AB
D'
E
C F
Your Project Staging AreaTree Object
![Page 15: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/15.jpg)
ManfredSteyer
Schematics are atomic (like db transactions)
AB
D
E
C F
A
BD'
E
CF
G
Your Project Staging AreaTree Object
![Page 16: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/16.jpg)
ManfredSteyer
Schematics are atomic (like db transactions)
AB
D
E
C F
A
BD'
E
CF
G
Your Project Staging AreaTree Object
![Page 17: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/17.jpg)
ManfredSteyer
Schematics are atomic (like db transactions)
A
BD'
E
CF
G
A
BD'
E
CF
G
Your Project Staging AreaTree Object
![Page 18: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/18.jpg)
ManfredSteyer
How to Create Custom Schematics?
![Page 19: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/19.jpg)
ManfredSteyer
You can create a schematic …
… with a schematic!
![Page 20: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/20.jpg)
ManfredSteyer
Scaffold Collection
npm install -g @angular-devkit/schematics-cli
schematics blank --name=hello-world
schematics schematic --name=hello-world
Contains sample schematics
![Page 21: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/21.jpg)
ManfredSteyer
![Page 22: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/22.jpg)
ManfredSteyer
Surviving Schematics: Rule 1 ;-)
"devDependencies": {
"@angular-devkit/core": "0.0.29",
"@angular-devkit/schematics": "0.0.52",
"@schematics/angular": "0.1.17",
[…]
}
Use the same versions as your CLI-generated project!
+ npm installVersions used in CLI 1.6.8
![Page 23: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/23.jpg)
ManfredSteyer
Project Structure
Schematic
Rule-Factory
![Page 24: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/24.jpg)
ManfredSteyer
Rule Factory
export function helloWorld(options: any): Rule {
[…]
}
![Page 25: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/25.jpg)
ManfredSteyer
Rule Factory
export function helloWorld(options: any): Rule {
return (tree: Tree, _context: SchematicContext) => {_context.logger.debug('Manfred was here!');tree.create('hello.txt', 'Hello World!');return tree;
};
}
Rule
![Page 26: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/26.jpg)
ManfredSteyer
Testing
npm run build
schematics .:hello-world
![Page 27: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/27.jpg)
ManfredSteyer
Testing in Demo App
npm install hello-world
or
npm link ..\hello-world
schematics hello-world:hello-world
![Page 28: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/28.jpg)
ManfredSteyer
Testing in Demo App
npm install hello-world
or
npm link ..\hello-world
ng generate hello-world:hello-world
![Page 29: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/29.jpg)
ManfredSteyer
DEMO
![Page 30: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/30.jpg)
ManfredSteyer
How to use Parameters?
![Page 31: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/31.jpg)
ManfredSteyer
Case Study
![Page 32: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/32.jpg)
ManfredSteyer
Result Optional
![Page 33: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/33.jpg)
ManfredSteyer
Execution
ng g nav:menu side-menu --menu-service
![Page 34: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/34.jpg)
ManfredSteyer
Project Structure Parameters
Rule-Factory
![Page 35: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/35.jpg)
ManfredSteyer
Option Class in schema.ts
export interface MenuOptions {
name: string;appRoot: string;path: string;sourceDir: string;
menuService: boolean;
[…]}
provided by the CLI
custom stuff
![Page 36: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/36.jpg)
ManfredSteyer
Rule Factory gets Parameter Object
export default function (options: MenuOptions): Rule {
return (host: Tree, context: SchematicContext) => {[…]
}
}
![Page 37: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/37.jpg)
ManfredSteyer
Rule Factory gets Parameter Object
export default function (options: MenuOptions): Rule {
return (host: Tree, context: SchematicContext) => {[…]
}
}
![Page 38: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/38.jpg)
ManfredSteyer
How to use Templates?
![Page 39: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/39.jpg)
ManfredSteyer
Project Structure
![Page 40: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/40.jpg)
ManfredSteyer
Template
export interface <%= classify(name) %>Item {title: string;iconClass: string;
}passed property
passed function
![Page 41: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/41.jpg)
ManfredSteyer
Template names are templates!
passed property
passed property passed function
![Page 42: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/42.jpg)
ManfredSteyer
Rule calling Templates
export default function (options: MenuOptions): Rule {[…]
}
![Page 43: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/43.jpg)
ManfredSteyer
Rule calling Templates
export default function (options: MenuOptions): Rule {return (host: Tree, context: SchematicContext) => {
[…]}
}
![Page 44: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/44.jpg)
ManfredSteyer
Rule calling Templates
export default function (options: MenuOptions): Rule {return (host: Tree, context: SchematicContext) => {
const templateSource = apply(url('./files'), [filterTemplates(options),template({...stringUtils, ...options}),move(options.sourceDir)
]);
[…]
}}
passed properties
passed functions
![Page 45: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/45.jpg)
ManfredSteyer
Rule calling Templates
export default function (options: MenuOptions): Rule {return (host: Tree, context: SchematicContext) => {
const templateSource = apply(url('./files'), [filterTemplates(options),template({...stringUtils, ...options}),move(options.sourceDir)
]);
const rule = chain([branchAndMerge(chain([
mergeWith(templateSource),[…]
]))]);return rule(host, context);
}}
![Page 46: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/46.jpg)
ManfredSteyer
DEMO
![Page 47: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/47.jpg)
ManfredSteyer
Modifying existing Code
![Page 48: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/48.jpg)
ManfredSteyer
Declaring generated Components
import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { SideMenuComponent } from './side-menu/side-menu.component';
@NgModule({imports: [
CommonModule],declarations: [
SideMenuComponent],exports: [
SideMenuComponent]
})export class CoreModule { }
![Page 49: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/49.jpg)
ManfredSteyer
Injecting Service into Component
[…]import { SideMenuService } from './core/side-menu/side-menu.service';
@Component({[…]
})export class AppComponent {
constructor(private sideMenuService: SideMenuService) {// sideMenuService.show = true;
}
}
![Page 50: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/50.jpg)
ManfredSteyer
Existing Rules
• addDeclarationToModule
• addExportToModule
• …
![Page 51: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/51.jpg)
ManfredSteyer
Custom Rule for modifying existing Code
• String Operations
• RegExp
• TypeScript Compiler API
![Page 52: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/52.jpg)
ManfredSteyer
Custom Rule for modifying existing Code
• String Operations
• RegExp
• TypeScript Compiler API
![Page 53: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/53.jpg)
ManfredSteyer
Code File as Syntax Tree (simplified)
ClassDeclaration
ClassKeyword(class)
Identifier (Demo)
…
SyntaxList
class Demo {constructor(otherDemo: Demo) {}
}
Subtree w/Constructor …
![Page 54: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/54.jpg)
ManfredSteyer
DEMO
![Page 55: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/55.jpg)
ManfredSteyer
Scaffolding whole Angular Applications?
![Page 56: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/56.jpg)
ManfredSteyer
![Page 57: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/57.jpg)
ManfredSteyer
![Page 58: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/58.jpg)
ManfredSteyer
Scaffolding a CRUD Module
![Page 59: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/59.jpg)
ManfredSteyer
Needed Steps
Example covering all
cases
Finding Variation Points
Define Model to Describe
Variation Points
Write and Test Generator
Take time for Reviews!
Refactor to use Libraries and Components
![Page 60: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/60.jpg)
ManfredSteyer
DEMO
![Page 61: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/61.jpg)
ManfredSteyer
Current State
Use it as is or
Fork it or
Contribute!
![Page 62: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/62.jpg)
ManfredSteyer
More Features in CLI 6
![Page 63: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/63.jpg)
ManfredSteyer
Installing and Updating Angular Packages
ng add @cool/library
• npm i @cool/library
• execute ng-add Schematic
ng update @cool/library
• npm update @cool/library
• execute update Schematics
![Page 64: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/64.jpg)
ManfredSteyer
ng add
{"schematics": {"ng-add": {
"description": "Initialize Library","factory": "./ng-add/index#ngAdd"
},}
}
![Page 65: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/65.jpg)
ManfredSteyer
ng update
{"schematics": {"update": {
"version": "2.0.0","description": "updates to version 2.0.0","factory": "./update/index#update"
}}
}
Choose any name …
![Page 66: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/66.jpg)
ManfredSteyer
ng update
{"schematics": {"update": {
"version": "2.0.0","description": "updates to version 2.0.0","factory": "./update/index#update"
},"update": {
"version": "2.1.0","description": "updates to version 2.1.0","factory": "./update21/index#update"
}}
}
![Page 67: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/67.jpg)
ManfredSteyer
![Page 68: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/68.jpg)
ManfredSteyer
Further Information
• Great introduction in Angular Blog• https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2
• My Tutorial/ Case Study (4 articles so far)• https://goo.gl/kGS6L5
• Angular-Crud (Generator)• https://www.npmjs.com/package/angular-crud
![Page 69: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/69.jpg)
ManfredSteyer
Conclusion
Automateboring tasks!
Official Solution in ng
world
CLI, Nx, Ngrx, …
Staging Area, Templates,
Rules
Create own ortweak existing
onesTry it out!
![Page 70: Custom Schematics and CLI · ManfredSteyer Custom Schematics and CLI: An Angular Application by the push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer](https://reader034.vdocuments.us/reader034/viewer/2022042708/5f39a5d97ec2ce504f6195f9/html5/thumbnails/70.jpg)
ManfredSteyer
Contact and Downloads
[mail] [email protected]
[blog] SOFTWAREarchitekt.at
[twitter] ManfredSteyer