Beyond ng new

Use lesser known features of the Angular CLI to unlock the ultimate productivity

Transcript

1. beyond ngnew Go http://cnun.es/beyond-ngnew
2. Ciro Nunes Brought to you by @cironunesdev cironunes.com
3. Ciro Nunes Brought to you by @cironunesdev cironunes.com
4. Ciro Nunes Brought to you by @cironunesdev cironunes.com
6. The CLI
7. I ❤ CLI
8. Agenda Basics 1 Unlock the ultimate productivity 2 Tips & tricks 3
9. Agenda Basics 1 Unlock the ultimate productivity 2 Tips & tricks 3
10. " Start # projects
11. ng new gdg-devfest --routing --prefix gdg Start new projects Include routing module and prefix all components with gdg-
12. --dry-run (-d) Pro tip! Do not modify the file system
13. $ Add capabilities
14. ng add @angular/material Add libraries
15. ng add @angular/material Add libraries Install the official material packages and schematics to generate material components
16. ng add @angular/material Add libraries Install the official material packages and schematics to generate material components ng g @angular/material:dashboard --name my-dash
17. ng add @angular/material Add libraries Install the official material packages and schematics to generate material components ng g @angular/material:dashboard --name my-dash Generate the dashboard component using @angular/material schematics
18. ng add @angular/pwa Add PWA features
19. ng add @angular/pwa Add PWA features Get 100/100 PWA score in lighthouse
20. % Keep your & dependencies ☝ up-to-date
21. ng update --all --next -d Update packages (
22. ng update --all --next -d Update packages ( All packages to latest versions including betas and RCS
23. ) Scaffold anything
24. ng generate (g) guard (g) appShell component (c) directive (d) service (c) … Scaffold anything! )
25. ng generate universal --client-project ang-conf Server-side rendering
26. ng generate universal --client-project ang-conf Scaffold server-side Angular with Universal Server-side rendering
27. ng generate library tooltip Scaffold libraries &
28. ng generate library tooltip Scaffold libraries & Scaffold libraries using ng-packgr
29. Create libraries for your components Pro tip! It’s a good way to check if their APIs are well designed
30. ng xi18n i18n
31. ng xi18n i18n Extract text marked with the i18n pipe into a translation file
32. ng eject Gain more control
33. ng eject Gain more control When you need more customisation or just want to learn more
34. OnCe you eject you can ’ t go back!
35. Memorise the shortcuts, type less! Usually you just have to type the first letter of a command
36. ng n new ng g generate ng s serve Shortcuts
37. Ask for help
38. ng help or just ng Need help?
40. ng g universal --help Need help per command?
41. ng g universal --help Need help per command? Help info for the universal schematic
42. Learn from the docs!
43. ng doc term in the API -s everywhere Search
45. Play around, have fun
46. Agenda Basics 1 Unlock the ultimate productivity 2 Tips & tricks 3
47. Share Learn Create
48. Schematics
49. Apply transformations to your project
50. Just like the CLI does
52. Rules
53. Rules Trees
54. Rules Takes a tree and returns a tree Trees
55. Rules Takes a tree and returns a tree Trees Existing files + stage area
56. Modifies trees instead of the filesystem directly
57. Dry runs Reusability Extensibility That allows for
58. Creating schematics
59. npm i -g @angular-devkit/schematics-cli Install it
60. schematics blank --name=my-component Generate a blank schematic
61. Rules
62. z import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; export function myComponent(options: any): Rule { return (tree: Tree, _context: SchematicContext) => { return tree; }; }
63. z import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; export function myComponent(options: any): Rule { return (tree: Tree, _context: SchematicContext) => { return tree; }; }
64. z import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; export function myComponent(options: any): Rule { return (tree: Tree, _context: SchematicContext) => { tree.create(options.name || 'hello', 'world'); return tree; }; } Create and modify files
65. z import { Rule, SchematicContext, Tree, chain, externalSchematic } from '@angular-devkit/schematics'; export function myComponent(options: any): Rule { return (tree: Tree, _context: SchematicContext) => { tree.create(options.name || 'hello', 'world'); return chain(tree, externalSchematic(...)); }; } Chain external schematics
66. Collections
67. z { "$schema": “.../@angular-devkit/schematics/ collection-schema.json", "schematics": { "my-component": { "description": "A blank schematic.", "factory": "./my-component/index#myComponent" } } } Schematics collection collection.json
68. npm run build Build and test it schematics .:my-component --name=test --dry-run=false
69. node --inspect-brk $(which schematics) .:myComponent --name=test Debug it
70. ng new myapp Use it with the CLI npm link $PATH_TO_my-component ng g my-component:my-component someName
71. * Remember to publish on NPM ⚓ when you’re happy with the results!
72. Learn more, for free! https://leanpub.com/angular-schematics/read_full
73. Agenda Basics 1 Unlock the ultimate productivity 2 Tips & tricks 3
74. Now the , of the -
76. Monorepo structure enterprise ready! .
79. / Practice the commands, use dry runs 0 Use, create and share schematics 1 Use the help command and the docs Takeaways 2 Embrace the ecosystem
80. Stay curious, explore the opportunities, use your creativity!
81. Thank you! I hope you enjoyed it @cironunesdev