Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Everything You Should Know About the New Angular CLI

328 views

Published on

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,

Published in: Software
  • Be the first to comment

Everything You Should Know About the New Angular CLI

  1. 1. Challenges Support Starter kit Sharing code Angular 42 4
  2. 2. @ahasall Frontend Software Engineer Amadou Sall GDG Toulouse / February 2019 Everything You Should Know About the New Angular CLI www.amadousall.com !
  3. 3. Workspaces Libraries Architects Schematics ... Overview
  4. 4. Workspaces
  5. 5. What is a Workspace? Angular apps are developed in the context of a workspace. Mono-repo or multi-repo. 8
  6. 6. Types of Projects in Workspace application library 9
  7. 7. Workspace Files . ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── package.json ├── tsconfig.json └── tslint.json 10
  8. 8. Workspace Configuration/angular.json { "version": 1, "newProjectRoot": "projects", "projects": { "first-app": {...}, "first-app-e2e": {...}, "second-app": {...}, "second-app-e2e": {...} }, "defaultProject": "first-app" } 11
  9. 9. Project Configuration { "projects": { "first-app": { "root": "projects/first-app/", "sourceRoot": "projects/first-app/src", "projectType": "application", "prefix": "app", "schematics": {...}, "architect": {...} } } } 12
  10. 10. Tips and Tricks By default, the workspace is “multi-repo” ng new <workspace_name> 14
  11. 11. Tips and Tricks If you want to use the “mono-repo” approach ng new <workspace_name> -–create-application=false 15
  12. 12. Libraries
  13. 13. Library Support 17
  14. 14. Generating a Library ng generate library <library_name> Scaffolds a library Updates our tsconfig.json file to add paths mapping 18
  15. 15. Building a Library ng build <library_name> Outputs the build artifacts to dist/<library_name> 19
  16. 16. 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
  17. 17. 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
  18. 18. Tips and Tricks Use the watch flag to always rebuild your library ng b <library_name> --watch 23
  19. 19. TheDifferentTypesofAngularCLI Commands Native, Architect, Schematics
  20. 20. Native Commands ng version ng config ng doc ng help 25
  21. 21. Architect Commands ng serve ng build ng lint ng test ng e2e ng xi18n ng run 26
  22. 22. Schematics Commands ng new ng generate ng add ng update 27
  23. 23. Architects
  24. 24. Architect Commands ng serve ng build ng lint ng test ng e2e ng xi18n ng run 29
  25. 25. The ng run Command to Rule Them All ng run <project>:<target>[:configuration] Runs an Architect target 30
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. Tips and Tricks Define your configuration inside the angular.json file 35
  30. 30. Schematics
  31. 31. What Can Schematics do? scaffold a new Angular application ng new generate code via predefined blueprints ng generate 37
  32. 32. What Can Schematics do? add framework support ng add update your dependencies/migrate existing code ng update 38
  33. 33. What are Schematics? A generic tool that helps with: • Code generation • Code transformations The goal is to make developers more productive 39
  34. 34. CreatingYourOwnSchematics
  35. 35. 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
  36. 36. Getting Started > yarn global add @angular-devkit/schematics-cli > schematics blank –name=simple > schematics schematic –name=advanced 42
  37. 37. 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
  38. 38. Getting Started . ├── README.md ├── package-lock.json ├── package.json ├── src │ ├── collection.json │ └── first │ ├── index.ts │ └── index_spec.ts └── tsconfig.json 44
  39. 39. 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
  40. 40. 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
  41. 41. Rule Factory Takes in options from the CLI Creates a RuleThe entry point of a schematic 47
  42. 42. Rule Factory export function tap(options: any): Rule { return (tree: Tree, context: SchematicContext) => { return tree; }; } 48
  43. 43. Rule export function tap(options: any): Rule { return (tree: Tree, context: SchematicContext) => { return tree; }; } 49
  44. 44. Rule Takes in a Tree and outputs a modified Tree Applies actions to a Tree 50
  45. 45. Tree A staging area for changes Contains: • a file system, • and a list of changes to apply to it 51
  46. 46. 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
  47. 47. Running a Schematic > ng generate @ahasall/schematics:first <name> > schematics @ahasall/schematics:first <name> 53
  48. 48. Chain Rules function (tree: Tree, context: SchematicContext) { return chain([ schematic('workspace', workspaceOptions), schematic('application', applicationOptions), ... ]) } 54
  49. 49. Templating Engine { "name": "<%= utils.dasherize(name) %>", ... "dependencies": { "@angular/core": "<%= latestVersions.Angular %>", "@angular/forms": "<%= latestVersions.Angular %>", ... } } 55
  50. 50. SchematicsUseCases
  51. 51. Theming your Angular Material applications ng generate application –theme=klm 57
  52. 52. The Container-Component pattern ng generate container-component flight 58
  53. 53. Setting up the Continuous Integration ng add @airfrance/angular-toolkit 59
  54. 54. Nobody wants to read the docs ng new –collection=@airfrance/schematics my-app 60
  55. 55. OtherNewFeatures
  56. 56. Budgets Let’s make some savings 62
  57. 57. Differential Serving Don’t make your users pay for Internet Explorer 63
  58. 58. Workspaces Libraries Architects Schematics ... Summary
  59. 59. @ahasall Frontend Software Engineer Amadou Sall GDG Toulouse / February 2019 Thank You! www.amadousall.com !

×