Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Beyond ng new
Search
Ciro Nunes
June 22, 2018
Programming
2
200
Beyond ng new
Use lesser known features of the Angular CLI to unlock the ultimate productivity
Ciro Nunes
June 22, 2018
Tweet
Share
More Decks by Ciro Nunes
See All by Ciro Nunes
Rust Front-end with Yew
cironunes
0
49
Type safe CSS with Reason
cironunes
0
110
What I've learned building automated docs for Ansarada's design system
cironunes
0
67
Animate your Angular apps
cironunes
0
420
Sweet Angular, good forms never felt so good
cironunes
0
66
Sweet Angular, good forms never felt so good
cironunes
0
290
Progressive Angular apps
cironunes
3
890
Angular: Um framework. Mobile & desktop.
cironunes
1
590
Firebase & Angular
cironunes
0
290
Other Decks in Programming
See All in Programming
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.5k
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
380
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.2k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
35
10k
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
3
520
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
140
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
710
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
760
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
550
Go製CLIツールをnpmで配布するには
syumai
0
790
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
350
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
510
Bash Introduction
62gerente
613
210k
KATA
mclloyd
30
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
How GitHub (no longer) Works
holman
314
140k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Agile that works and the tools we love
rasmusluckow
329
21k
Why Our Code Smells
bkeepers
PRO
337
57k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Statistics for Hackers
jakevdp
799
220k
Transcript
beyond ngnew Go http://cnun.es/beyond-ngnew
Ciro Nunes Brought to you by @cironunesdev cironunes.com
Ciro Nunes Brought to you by @cironunesdev cironunes.com
Ciro Nunes Brought to you by @cironunesdev cironunes.com
None
The CLI
I ❤ CLI
Agenda Basics 1 Unlock the ultimate productivity 2 Tips &
tricks 3
Agenda Basics 1 Unlock the ultimate productivity 2 Tips &
tricks 3
" Start # projects
ng new gdg-devfest --routing --prefix gdg Start new projects Include
routing module and prefix all components with gdg-
--dry-run (-d) Pro tip! Do not modify the file system
$ Add capabilities
ng add @angular/material Add libraries
ng add @angular/material Add libraries Install the official material packages
and schematics to generate material components
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
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
ng add @angular/pwa Add PWA features
ng add @angular/pwa Add PWA features Get 100/100 PWA score
in lighthouse
% Keep your & dependencies ☝ up-to-date
ng update --all --next -d Update packages (
ng update --all --next -d Update packages ( All packages
to latest versions including betas and RCS
) Scaffold anything
ng generate (g) guard (g) appShell component (c) directive (d)
service (c) … Scaffold anything! )
ng generate universal --client-project ang-conf Server-side rendering
ng generate universal --client-project ang-conf Scaffold server-side Angular with Universal
Server-side rendering
ng generate library tooltip Scaffold libraries &
ng generate library tooltip Scaffold libraries & Scaffold libraries using
ng-packgr
Create libraries for your components Pro tip! It’s a good
way to check if their APIs are well designed
ng xi18n i18n
ng xi18n i18n Extract text marked with the i18n pipe
into a translation file
ng eject Gain more control
ng eject Gain more control When you need more customisation
or just want to learn more
OnCe you eject you can ’ t go back!
Memorise the shortcuts, type less! Usually you just have to
type the first letter of a command
ng n new ng g generate ng s serve Shortcuts
Ask for help
ng help or just ng Need help?
None
ng g universal --help Need help per command?
ng g universal --help Need help per command? Help info
for the universal schematic
Learn from the docs!
ng doc term in the API -s everywhere Search
None
Play around, have fun
Agenda Basics 1 Unlock the ultimate productivity 2 Tips &
tricks 3
Share Learn Create
Schematics
Apply transformations to your project
Just like the CLI does
None
Rules
Rules Trees
Rules Takes a tree and returns a tree Trees
Rules Takes a tree and returns a tree Trees Existing
files + stage area
Modifies trees instead of the filesystem directly
Dry runs Reusability Extensibility That allows for
Creating schematics
npm i -g @angular-devkit/schematics-cli Install it
schematics blank --name=my-component Generate a blank schematic
Rules
z import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; export
function myComponent(options: any): Rule { return (tree: Tree, _context: SchematicContext) => { return tree; }; }
z import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; export
function myComponent(options: any): Rule { return (tree: Tree, _context: SchematicContext) => { return tree; }; }
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
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
Collections
z { "$schema": “.../@angular-devkit/schematics/ collection-schema.json", "schematics": { "my-component": { "description":
"A blank schematic.", "factory": "./my-component/index#myComponent" } } } Schematics collection collection.json
npm run build Build and test it schematics .:my-component --name=test
--dry-run=false
node --inspect-brk $(which schematics) .:myComponent --name=test Debug it
ng new myapp Use it with the CLI npm link
$PATH_TO_my-component ng g my-component:my-component someName
* Remember to publish on NPM ⚓ when you’re happy
with the results!
Learn more, for free! https://leanpub.com/angular-schematics/read_full
Agenda Basics 1 Unlock the ultimate productivity 2 Tips &
tricks 3
Now the , of the -
None
Monorepo structure enterprise ready! .
None
None
/ 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
Stay curious, explore the opportunities, use your creativity!
Thank you! I hope you enjoyed it @cironunesdev