Generating Applications with the Angular CLI and Schematics

Slides from my talk at the International JavaScript Conference in London, April 2018

# Example: Scaffolding a Menu Component

- Using parameters
- Using templates
- Modifying existing code with the TypeScript Compiler API

https://github.com/manfredsteyer/schematics-modify-typescript-ast

# Example: Scaffolding a Crud Application

https://github.com/manfredsteyer/angular-crud
https://www.npmjs.com/package/angular-crud

# Great Intro into Schematics
https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2

# Blog Article Series about Schematics (4 parts so far)
http://www.softwarearchitekt.at/post/2017/10/29/generating-custom-code-with-the-angular-cli-and-schematics.aspx

# Free eBook about Schematics

My blog article series as an eBook

https://leanpub.com/angular-schematics

Transcript

1. ManfredSteyer Generating Applications with the Angular CLI and Schematics Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. ManfredSteyer About me… • Manfred Steyer • Blog: SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 3 Manfred Steyer
3. 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
4. ManfredSteyer Angular CLI
5. ManfredSteyer Using the CLI ng new my-project cd my-project ng generate component my-component
6. ManfredSteyer Vision ng new my-project --collection my-special-templ cd my-project ng generate my:menu-component side-menu
7. ManfredSteyer Contents • What is Schematics? • How to create custom schematics? • How to use parameters? • How to use templates? • How to scaffold whole projects?
8. ManfredSteyer What is Schematics?
9. ManfredSteyer Schematics Scaffolding Tool used by Angular CLI Schematics: The whole project Schematic: Code Generator Collection: Set of Schematics
10. ManfredSteyer Angular Labs Experimental :: Breaking Changes ahead Give it a try!
11. ManfredSteyer Nrwl Nx
12. ManfredSteyer
13. ManfredSteyer Schematics are atomic (like db transactions) A B D E C F A B D E C F Your Project Staging Area Tree Object
14. ManfredSteyer Schematics are atomic (like db transactions) A B D E C F A B D' E C F Your Project Staging Area Tree Object
15. ManfredSteyer Schematics are atomic (like db transactions) A B D E C F A B D' E C F G Your Project Staging Area Tree Object
16. ManfredSteyer Schematics are atomic (like db transactions) A B D E C F A B D' E C F G Your Project Staging Area Tree Object
17. ManfredSteyer Schematics are atomic (like db transactions) A B D' E C F G A B D' E C F G Your Project Staging Area Tree Object
18. ManfredSteyer How to Create Custom Schematics?
19. ManfredSteyer You can create a schematic … … with a schematic!
20. ManfredSteyer Scaffold Collection npm install -g @angular-devkit/schematics-cli schematics blank --name=hello-world schematics schematic --name=hello-world Contains sample schematics
21. ManfredSteyer
22. 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 install Versions used in CLI 1.6.8
23. ManfredSteyer Project Structure Schematic Rule- Factory
24. ManfredSteyer Rule Factory export function helloWorld(options: any): Rule { […] }
25. 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
26. ManfredSteyer Testing npm run build schematics .:hello-world
27. ManfredSteyer Testing in Demo App npm install hello-world or npm link ..\hello-world schematics hello-world:hello-world
28. ManfredSteyer Testing in Demo App npm install hello-world or npm link ..\hello-world ng generate hello-world:hello-world
29. ManfredSteyer DEMO
30. ManfredSteyer How to use Parameters?
31. ManfredSteyer Case Study
32. ManfredSteyer Result Optional
33. ManfredSteyer Execution ng g nav:menu side-menu --menu-service
34. ManfredSteyer Project Structure Parameters Rule- Factory
35. 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
36. ManfredSteyer Rule Factory gets Parameter Object export default function (options: MenuOptions): Rule { return (host: Tree, context: SchematicContext) => { […] } }
37. ManfredSteyer Rule Factory gets Parameter Object export default function (options: MenuOptions): Rule { return (host: Tree, context: SchematicContext) => { […] } }
38. ManfredSteyer How to use Templates?
39. ManfredSteyer Project Structure
40. ManfredSteyer Template export interface <%= classify(name) %>Item { title: string; iconClass: string; } passed property passed function
41. ManfredSteyer Template names are templates! passed property passed property passed function
42. ManfredSteyer Rule Calling Templates export default function (options: MenuOptions): Rule { […] }
43. ManfredSteyer Rule Calling Templates export default function (options: MenuOptions): Rule { return (host: Tree, context: SchematicContext) => { […] } }
44. 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
45. 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); } }
46. ManfredSteyer DEMO
47. ManfredSteyer Modifying existing Code
48. 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 { }
49. 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; } }
50. ManfredSteyer Existing Rules • addDeclarationToModule • addExportToModule • …
51. ManfredSteyer Custom Rule for Modifying Existing Code • String Operations • RegExp • TypeScript Compiler API
52. ManfredSteyer Custom Rule for Modifying Existing Code • String Operations • RegExp • TypeScript Compiler API
53. ManfredSteyer Code File as Syntax Tree (simplified) ClassDeclaration ClassKeyword (class) Identifier (Demo) … SyntaxList class Demo { constructor(otherDemo: Demo) {} } Subtree w/ Constructor …
54. ManfredSteyer DEMO
55. ManfredSteyer Scaffolding whole Angular Applications?
56. ManfredSteyer
57. ManfredSteyer
58. ManfredSteyer Scaffolding a CRUD Module
59. 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
60. ManfredSteyer DEMO
61. ManfredSteyer Current State Use it as is or Fork it or Contribute!
62. ManfredSteyer More Features in CLI 6
63. 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
64. ManfredSteyer ng add { "schematics": { "ng-add": { "description": "Initialize Library", "factory": "./ng-add/index#ngAdd" }, } }
65. ManfredSteyer ng update { "schematics": { "update": { "version": "2.0.0", "description": "updates to version 2.0.0", "factory": "./update/index#update" } } } Choose any name …
66. 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" } } }
67. ManfredSteyer
68. 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
69. ManfredSteyer Conclusion Automate boring tasks! Official Solution in ng world CLI, Nx, Ngrx, … Staging Area, Templates, Rules schema.json w/ JSON Schema Create own or tweak existing ones ng add & ng update
70. ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer