Getting your sh*t done with
Angular CLI
meet.js Krakow, 18.05.2017
Rafal Rumanek
@ Codewise
such command
much wow
Agenda
-
Glossary
-
CLI features + demo
-
What's next for the CLI?
-
Quizzes in the meantime,
stay focused!
Glossary
Angular - the other framework (previously known as Angular 2)
CLI - Command Line Interface
JiT - Just in Time (compilation) - compiling your templates in browser.
AoT - Ahead of Time (compilation) - compiling your templates during the build. You won't need to ship the compiler to the browser.
Tree shaking - dead-code elimination, or more precisely, live-code import
Why would I need CLI?
Webpack, tests and AoT configuration can be really painful.
Importing, declaring, providing proper pieces
is a place where you are likely to make errors
So what it actually does?
-
Scaffolding
-
Generating
-
Building
-
Serving
-
Testing
Scaffolding
npm install -g @angular/cli
ng new meetjs-demo --routingblueprints:
https://github.com/angular/angular-cli/tree/master/packages/%40angular/cli/blueprints
no custom blueprints (yet...)
Scaffolding
lookup in tree for the closest module
Generating
ng generate c components/spinner \
--spec=false --inline-styleGenerating
ng generate m teamQUIZ TIME
much prize
wow
It's easy!
aaaand deep linking works too!
Lazy loading
{
path: 'XXX',
loadChildren: 'MODULE_PATH#MODULE_NAME'
}
'Staying on the shoulders of the giants'
Testing
ng test
ng e2e
ng serve
1. Styles compiling
2. Typescript transpilation
3. Bundling
4. Assets optimization
5. Live reloading (via websockets)
6. Code spitting
Build & serve
ng serve --prod
1. Styles compiling
1.5 AoT compiling
2. Typescript transpilation
3. Bundling
4. Assets optimization
5. Live reloading (via websockets)
6. Code spitting
Build & serve
portable dist folder <3
Build & serve
ng build
ng build --prod --sourcemaps=true --output-path=dist.prodsource-map-explorer
npm install -g source-map-explorer
source-map-explorer dist/vendor.xxx.bundle.js
Exports webpack.config.js
You can't use some of the commands from
CLI anymore :(
...and you might miss some of the cool updates
ng eject
CLI 1.x:
-
better tree shaking
(~20% decrease in size) -
faster AoT
-
more descriptive errors
What can we expect?
CLI 2.x:
-
custom blueprints
-
custom plugins for CLI
-
AoT be default in dev?
@ngtools/webpack
QUIZ TIME
much prize
wow
AngularJS
Conclusion
+ generating your code can save you a lot of silly mistakes
+ setting up your project, including tests is something you finally don't have to worry about
+ for custom builds - check out the webpack plugin
+ you get build improvements for free*
Conclusion
- no custom blueprints (yet)
- no plugins for CLI (yet)
- adapting existing project/build requires work
Further reading
Thank you <3
Questions?
PS. We are hiring
codewise.com/careers