The Angular CLI is a powerful tool that makes it easy to build Angular applications. With the Angular CLI, we can scaffold, develop, test, and build our applications. It's the best starter kit for Angular projects. Since version 6, more powerful and more generic, the Angular CLI has introduced plenty of great features like workspaces, architects, builders, library support, and my preferred, schematics. Angular Schematics are the main focus of this presentation. It allows us to create our custom blueprints, add a framework and its setup to our application via a single command, and to update/migrate our application. After this session, you will have a big picture of the new Angular CLI features including: • workspaces, • library support, • architects, • builders, • how to create your own Schematics,

4. Challenges
Support
Starter kit
Sharing code
Angular 42
4

5. @ahasall
Frontend Software Engineer
Amadou Sall
GDG Toulouse / February 2019
Everything You Should Know
About the New Angular CLI
www.amadousall.com
!

6. Workspaces
Libraries
Architects
Schematics
...
Overview

7. Workspaces

8. What is a Workspace?
Angular apps are developed in the context of a
workspace.
Mono-repo or multi-repo.
8

9. Types of Projects in Workspace
application
library
9

10. Workspace Files
.
├── .editorconfig
├── .gitignore
├── README.md
├── angular.json
├── package.json
├── tsconfig.json
└── tslint.json
10

11. Workspace Configuration/angular.json
{
"version": 1,
"newProjectRoot": "projects",
"projects": {
"first-app": {...},
"first-app-e2e": {...},
"second-app": {...},
"second-app-e2e": {...}
},
"defaultProject": "first-app"
}
11

12. Project Configuration
{
"projects": {
"first-app": {
"root": "projects/first-app/",
"sourceRoot": "projects/first-app/src",
"projectType": "application",
"prefix": "app",
"schematics": {...},
"architect": {...}
}
}
}
12

14. Tips and Tricks
By default, the workspace is “multi-repo”
ng new <workspace_name>
14

15. Tips and Tricks
If you want to use the “mono-repo” approach
ng new <workspace_name> -–create-application=false
15

16. Libraries

17. Library Support
17

18. Generating a Library
ng generate library <library_name>
Scaffolds a library
Updates our tsconfig.json file to add paths mapping
18

19. Building a Library
ng build <library_name>
Outputs the build artifacts to dist/<library_name>
19

20. Using Your Library
import { MakeItAwesomeModule } from 'make-it-awesome';
First it looks in the tsconfig paths
Then it looks in the node_modules folder
20

21. Publishing Your Library
ng build <library_name>
cd dist/<library_name>
npm adduser
npm publish –-access=public
Let’s share the library with the world
21

23. Tips and Tricks
Use the watch flag to always rebuild your library
ng b <library_name> --watch
23

24. TheDifferentTypesofAngularCLI
Commands
Native, Architect, Schematics

25. Native Commands
ng version
ng config
ng doc
ng help
25

26. Architect Commands
ng serve
ng build
ng lint
ng test
ng e2e
ng xi18n
ng run
26

27. Schematics Commands
ng new
ng generate
ng add
ng update
27

28. Architects

29. Architect Commands
ng serve
ng build
ng lint
ng test
ng e2e
ng xi18n
ng run
29

30. The ng run Command to Rule Them All
ng run <project>:<target>[:configuration]
Runs an Architect target
30

31. The ng run command
Predefined Commands
ng build <project>
ng test <project>
ng lint <project>
...
Using ng run
ng run <project>:build
ng run <project>:test
ng run <project>:lint
...
31

32. Project Configuration
"make-it-awesome": {
"root": "projects/make-it-awesome",
"sourceRoot": "projects/make-it-awesome/src",
"projectType": "library",
"prefix": "lib",
"architect": {
"build": {...},
"test": {...},
"lint": {...}
}
}
32

33. Target configuration
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/make-it-awesome/src/test.ts",
"tsConfig": "projects/make-it-awesome/tsconfig.spec.json",
"karmaConfig": "projects/make-it-awesome/karma.conf.js"
},
"configurations": {
"ci": {
"browsers": "ChromeHeadlessCI",
"codeCoverage": true
}
}
}
33

35. Tips and Tricks
Define your configuration inside the angular.json file
35

36. Schematics

37. What Can Schematics do?
scaffold a new Angular application
ng new
generate code via predefined blueprints
ng generate
37

38. What Can Schematics do?
add framework support
ng add
update your dependencies/migrate existing code
ng update
38

39. What are Schematics?
A generic tool that helps with:
• Code generation
• Code transformations
The goal is to make developers more productive
39

40. CreatingYourOwnSchematics

41. Why Create Our Custom Schematics
Our starter kit can be replaced by a single command
Building solid foundations
Enforcing best practices across the company
Startup mode
Automate all things!
41

42. Getting Started
> yarn global add @angular-devkit/schematics-cli
> schematics blank –name=simple
> schematics schematic –name=advanced
42

43. Getting Started
> schematics blank --name=first
CREATE /first/README.md (639 bytes)
CREATE /first/.gitignore (191 bytes)
CREATE /first/.npmignore (64 bytes)
CREATE /first/package.json (533 bytes)
CREATE /first/tsconfig.json (656 bytes)
CREATE /first/src/collection.json (214 bytes)
CREATE /first/src/first/index.ts (313 bytes)
CREATE /first/src/first/index_spec.ts (462 bytes)
43

44. Getting Started
.
├── README.md
├── package-lock.json
├── package.json
├── src
│ ├── collection.json
│ └── first
│ ├── index.ts
│ └── index_spec.ts
└── tsconfig.json
44

45. package.json
{
"name": "@ahasall/schematics",
"version": "0.0.0",
"schematics": "./collection.json",
"dependencies": {
"@angular-devkit/core": "^7.3.1",
"@angular-devkit/schematics": "^7.3.1",
"typescript": "~3.2.2",
"@types/node": "^8.0.31",
"rxjs": "6.3.3"
}
}
45

46. collection.json
{
"$schema": "/path/to/schema.json",
"schematics": {
"first": {
"description": "A first schematic",
"factory": "./first"
},
"second": {
"description": "A second schematic.",
"factory": "./second",
"schema": "./second/schema.json"
}
}
}
46

47. Rule Factory
Takes in options from
the CLI
Creates a RuleThe entry point of a
schematic
47

48. Rule Factory
export function tap(options: any): Rule {
return (tree: Tree, context: SchematicContext) => {
return tree;
};
}
48

49. Rule
export function tap(options: any): Rule {
return (tree: Tree, context: SchematicContext) => {
return tree;
};
}
49

50. Rule
Takes in a Tree and
outputs a modified
Tree
Applies actions to a
Tree
50

51. Tree
A staging area for
changes
Contains:
• a file system,
• and a list of changes
to apply to it
51

52. Working on a Tree
function do(tree: Tree, context: SchematicContext) {
tree.create('hello.txt', 'Bonjour GDG Toulouse’);
tree.read('file.txt');
tree.rename('hello.txt’, 'salut.txt');
tree.delete('salut.txt');
return tree;
}
52

53. Running a Schematic
> ng generate @ahasall/schematics:first <name>
> schematics @ahasall/schematics:first <name>
53

54. Chain Rules
function (tree: Tree, context: SchematicContext) {
return chain([
schematic('workspace', workspaceOptions),
schematic('application', applicationOptions),
...
])
}
54

55. Templating Engine
{
"name": "<%= utils.dasherize(name) %>",
...
"dependencies": {
"@angular/core": "<%= latestVersions.Angular %>",
"@angular/forms": "<%= latestVersions.Angular %>",
...
}
}
55

56. SchematicsUseCases

57. Theming your Angular Material applications
ng generate application –theme=klm
57

58. The Container-Component pattern
ng generate container-component flight
58

59. Setting up the Continuous Integration
ng add @airfrance/angular-toolkit
59

60. Nobody wants to read the docs
ng new –collection=@airfrance/schematics my-app
60

61. OtherNewFeatures

62. Budgets
Let’s make some savings
62

63. Differential Serving
Don’t make your users pay for Internet Explorer
63

64. Workspaces
Libraries
Architects
Schematics
...
Summary

65. @ahasall
Frontend Software Engineer
Amadou Sall
GDG Toulouse / February 2019
Thank You!
www.amadousall.com
!