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.

Use Angular Schematics to Simplify Your Life - Develop Denver 2019

51 views

Published on

Angular Schematics give developers a way to manipulate projects with code. Not just Angular projects, but any project that has a package.json file! Learn how to use them in this talk.

Blog post: https://developer.okta.com/blog/2019/02/13/angular-schematics
GitHub repo: https://github.com/oktadeveloper/schematics

Published in: Software
  • MY TESTIMONY AS AN ILLUMINATI MEMBER Am happy to use this testimony to testify the good work of Illuminati to the worldwide, no matter that challenge you are facing today, as you are reading this my testimony today, I want you to know that the solution to your problem is joining Illuminati by reaching illuminatiworldsuccess@gmail.com or probably whatsapp {+2348075381929} for your initiation process. And for those of you that have been scammed severally on the process of joining Illuminati, I write onto you today, that I myself have been scammed severally and even duped on my quest to join Illuminati but I never give up because I know I will have a huge benefit as a member of Illuminati. Due to the several scams people (even myself) goes through in other to join Illuminati, I pleaded with our Lord Grand master Lucifer and even brought to his notice the stress countless people are going through in other to join Illuminati, Am happy to tell you that, I, as a member of Illuminati, am also permitted by our Lord Grand Master Lucifer to assist any person interested in joining Illuminati today by contacting our head office illuminatiworldsuccess@gmail.com and you can also WhatsApp {+2348075381929} for your registration and initiation. And also have in mind that as a new member you will receive a lot of benefits such as brand new car of your choice, own a mansion in any country of your choice and cash sum of $2,000,000.00 dollar and so many others that I can't mention publicly. You have nothing to worry about because REGISTRATION IS FREE TO EVERY NEW MEMBER THAT WANTS TO BE INITIATED TO ILLUMINATI BROTHERHOOD TODAY.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Use Angular Schematics to Simplify Your Life - Develop Denver 2019

  1. 1. Use Angular Schematics to Simplify Your Life August 15, 2019 Matt Raible | @mraible Photo by Trish McGinity mcginityphoto.com
  2. 2. Blogger on raibledesigns.com and developer.okta.com/blog Web Developer and Java Champion Father, Husband, Skier, Mountain Biker, Whitewater Rafter Open Source Connoisseur Hi, I’m Matt Raible! Bus Lover Okta Developer Advocate
  3. 3. developer.okta.com
  4. 4. Agenda 1. What are Angular Schematics? 2. Create and Test a Schematic 3. Schematic Templates 4. Template Expression Language 5. OpenID Connect Authentication 6. Schematics for React, Vue, and Ionic
  5. 5. What are Angular Schematics?
  6. 6. Create a Schematic $ npm i -g @angular-devkit/schematics-cli $ schematics blank —-name=my-component CREATE /my-component/README.md (639 bytes) CREATE /my-component/.gitignore (191 bytes) CREATE /my-component/.npmignore (64 bytes) CREATE /my-component/package.json (539 bytes) CREATE /my-component/tsconfig.json (656 bytes) CREATE /my-component/src/collection.json (231 bytes) CREATE /my-component/src/my-component/index.ts (318 bytes) CREATE /my-component/src/my-component/index_spec.ts (474 bytes)
  7. 7. Project metadata: collection.json { "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json", "schematics": { "my-component": { "description": "A blank schematic.", "factory": "./my-component/index#myComponent" } }
  8. 8. Factory function: index.ts import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; export function myComponent(_options: any): Rule { return (tree: Tree, _context: SchematicContext) => { return tree; }; }
  9. 9. Unit test: index_spec.ts import { Tree } from '@angular-devkit/schematics'; import { SchematicTestRunner } from '@angular-devkit/schematics/testing'; import * as path from 'path'; const collectionPath = path.join(__dirname, '../collection.json'); describe('my-component', () => { it('works', () => { const runner = new SchematicTestRunner('schematics', collectionPath); const tree = runner.runSchematic('my-component', {}, Tree.empty()); expect(tree.files).toEqual([]); }); });
  10. 10. Schematic Templates
  11. 11. Copy and Manipulate Templates: directory structure $ tree . src/my-component/ ├── files │ └── src │ └── app │ ├── app.component.html │ └── app.component.ts ├── index.ts └── index_spec.ts
  12. 12. Copy and Manipulate Templates: app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { name = '<%= name %>'; } src/my-component/files/src/app/app.component.ts
  13. 13. Copy and Manipulate Templates: app.component.html src/my-component/files/src/app/app.component.html <div style="text-align:center"> <h1> Hello, {{ name }} </h1> </div> <router-outlet></router-outlet>
  14. 14. Copy and Manipulate Templates: schema.json { "$schema": "http://json-schema.org/schema", "id": "SchematicsMyComponent", "title": "My Component Schema", "type": "object", "properties": { "name": { "type": "string", "description": "Your Name", "x-prompt": "What is your name?" } }, "required": ["name"] }
  15. 15. Copy and Manipulate Templates: collection.json { "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json", "schematics": { "my-component": { "description": "A blank schematic.", "factory": "./my-component/index#myComponent", "schema": "./my-component/schema.json" } } }
  16. 16. Copy and Manipulate Templates: index.ts export function myComponent(_options: any): Rule { return (tree: Tree, _context: SchematicContext) => { setupOptions(tree, _options); const movePath = normalize(_options.path + '/'); const templateSource = apply(url('./files/src'), [ template({..._options}), move(movePath), // fix for https://github.com/angular/angular-cli/issues/11337 forEach((fileEntry: FileEntry) => { if (tree.exists(fileEntry.path)) { tree.overwrite(fileEntry.path, fileEntry.content); } return fileEntry; }), ]); const rule = mergeWith(templateSource, MergeStrategy.Overwrite); return rule(tree, _context); }; }
  17. 17. Copy and Manipulate Templates: setupOptions() export function setupOptions(host: Tree, options: any): Tree { const workspace = getWorkspace(host); if (!options.project) { options.project = Object.keys(workspace.projects)[0]; } const project = workspace.projects[options.project]; options.path = join(normalize(project.root), 'src'); return host; }
  18. 18. Copy and Manipulate Templates: index_spec.ts beforeEach(() => { appTree = schematicRunner.runExternalSchematic( '@schematics/angular', 'workspace', workspaceOptions); appTree = schematicRunner.runExternalSchematic( '@schematics/angular', 'application', appOptions, appTree); }); it('works', () => { const runner = new SchematicTestRunner('schematics', collectionPath); runner.runSchematicAsync( 'my-component', schemaOptions, appTree).toPromise().then(tree => { const appComponent = tree.readContent( ‘/projects/schematest/src/app/app.component.ts'); expect(appComponent).toContain(`name = '${schemaOptions.name}'`); }); });
  19. 19. Run Your Schematic with Angular CLI $ npm pack $ ng new my-test-app --routing --style css $ cd my-test-app $ npm install ../my-component/my-component-0.0.0.tgz $ ng g my-component:my-component
  20. 20. Publish Your Schematic to npm !22 By default, .npmignore ignores all TypeScript files Modify .npmignore so it doesn't exclude your template files! Run npm publish
  21. 21. Add Support for ng add with Angular CLI !23 { "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json", "schematics": { "my-component": { "description": "A blank schematic.", "factory": "./my-component/index#myComponent", "schema": "./my-component/schema.json" }, "ng-add": { "factory": "./ng-add/index", "description": "Add schematic", "schema": "./my-component/schema.json" } } }
  22. 22. Add Support for ng add with Angular CLI !24 import { chain, Rule, schematic, SchematicContext, Tree, } from '@angular-devkit/schematics'; export default function (options: any): Rule { return (host: Tree, context: SchematicContext) => { return chain([ schematic('my-component', options) ])(host, context); }; }
  23. 23. Template Expression Language Placeholder Description <%= expression %> Replaced with the result of the call of the given expression. This only supports direct expressions, no structural (for/if/...) JavaScript. <%- expression %> Same as above, but the value of the result will be escaped for HTML when inserted (i.e. replacing '<' with '<') <% inline code %> Inserts the given code into the template structure, allowing to insert structural JavaScript. <%# text %> A comment, which gets entirely dropped. https://www.npmjs.com/package/@angular-devkit/schematics#content-templating
  24. 24. Example Template Code import { Injectable } from '@angular/core'; <% if (platform === 'cordova') { %> import { CordovaBrowser } from 'ionic-appauth/lib/cordova'; <% } else { %> import { CapacitorBrowser } from 'ionic-appauth/lib/capacitor'; <% } %> @Injectable({ providedIn: 'root' }) export class BrowserService extends <%= (platform === 'cordova') ? 'CordovaBrowser' : 'CapacitorBrowser' %> { }
  25. 25. Secure Your Angular App in Minutes! $ ng new my-secure-app --routing $ cd my-secure-app // create a SPA app on Okta, copy settings $ ng add @oktadev/schematics
  26. 26. git clone https://github.com/oktadeveloper/okta-spring-webflux-react- example.git Blog, Screencast, and Source Code https://developer.okta.com/blog/2019/02/13/angular-schematics
  27. 27. Supports Angular, React, Vue, and Ionic 4 Detects JavaScript or TypeScript https://github.com/oktadeveloper/schematics OktaDev Schematics !31 📱
  28. 28. Thanks! Keep in Touch raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper developer.okta.com
  29. 29. developer.okta.com

×