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
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
Β
Use Angular Schematics to Simplify Your Life - Develop Denver 2019
1. Use Angular Schematics to Simplify Your Life
August 15, 2019
Matt Raible | @mraible
Photo by Trish McGinity mcginityphoto.com
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
6. 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
21. 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
22. 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
23. 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"
}
}
}
24. 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);
};
}
25. 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
26. 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' %> {
}
27. 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