![The ng run Command to Rule Them All
ng run <project>:<target>[:configuration]
Runs an Architect target
30](https://image.slidesharecdn.com/angularcli-gdgtoulouse-amadousall-190223113507/85/Everything-You-Should-Know-About-the-New-Angular-CLI-30-320.jpg)
![Chain Rules
function (tree: Tree, context: SchematicContext) {
return chain([
schematic('workspace', workspaceOptions),
schematic('application', applicationOptions),
...
])
}
54](https://image.slidesharecdn.com/angularcli-gdgtoulouse-amadousall-190223113507/85/Everything-You-Should-Know-About-the-New-Angular-CLI-54-320.jpg)
Everything You Should Know About the New Angular CLI
- 5. @ahasall Frontend Software Engineer Amadou Sall GDG Toulouse / February 2019 Everything You Should Know About the New Angular CLI www.amadousall.com !
- 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
- 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
- 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
- 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
- 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
- 65. @ahasall Frontend Software Engineer Amadou Sall GDG Toulouse / February 2019 Thank You! www.amadousall.com !