Skip to content

demo.adoc

Latest commit

 

History

History
158 lines (102 loc) · 4.08 KB

demo.adoc

File metadata and controls

158 lines (102 loc) · 4.08 KB

Use Angular Schematics to Simplify Your Life

The brackets at the end of each step indicate the alias’s or IntelliJ Live Templates to use. You can find the template definitions at mraible/idea-live-templates.

See Schematics in Action

  1. Install Angular CLI: npm install -g @angular/cli

  2. Create a new Angular project: ng new my-cool-app --routing

  3. Add Okta for authentication: ng add @oktadev/schematics

Create Your First Schematic

  1. Install the Schematics CLI

    npm i -g @angular-devkit/schematics-cli@0.13.1

  2. Run schematics to create a new blank project

    schematics blank --name=my-component

  3. Show collection.json, index.ts, and index_spec.ts

  4. Run npm test

Add a Hello World Example

  1. Modify index.ts to create a hello.ts file

    tree.create('hello.ts', 'console.log("Hello, World")');

  2. Update index_spec.ts to verify this file is created

    expect(tree.files).toEqual(['/hello.ts']);

  3. Run npm test to verify test passes

  4. Run your schematic

    schematics .:my-component

  5. Turn off debug mode and run it

    schematics .:my-component --dry-run=false

Copy and Manipulate Templates in Your Schematic

  1. Create a directory to hold your templates

    mkdir -p src/my-component/files/src/app

  2. Create an app.component.ts file in src/my-component/files/src/app [schematics-app-ts]

    import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = '<%= name %>';
}

  3. Create an app.component.html file to read the name variable [schematics-app-html]

    <div style="text-align:center">
  <h1>
   Hello, {{ name }}
  </h1>
</div>
<router-outlet></router-outlet>

  4. Create a src/my-component/schema.json file to define a name prompt [schematics-schema]

    {
  "$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"]
}

  5. Update src/collection.json to reference this file in a schema property

    {
  "$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"
    }
  }
}

  6. Install @schematics/angular to allow getting a workspace and project in your schematic

    npm i -D @schematics/angular@7.3.0

  7. Modify index.ts to get the generated project’s path, and copy templates [schematics-setup, schematics-move]

Test it!

  1. Update index_spec.ts to create a workspace, project, and pass in options [schematics-test]

  2. Run npm test and rejoice in your victory!

  3. Run your schematics with Angular CLI

    ng new my-test-app --routing --style css
cd my-test-app
npm link ../my-component

  4. Run your schematic with the ng g command

    ng g my-component:my-component

  5. Fix already exists error [schematics-move-fix]

  6. Run npm run build and try again

Publish Your Schematics to npm

  1. Modify .npmignore so it doesn’t exclude your template files.

  2. Publish using npm publish

  3. You can use npm unpublish if you make a mistake (within the first 72 hours)

Add Support for ng add with Angular CLI

  1. Add ng-add to collection.json [schematics-ng-add]

    "ng-add": {
  "factory": "./ng-add/index",
  "description": "Add schematic",
  "schema": "./my-component/schema.json"
}

  2. Create src/ng-add/index.ts to invoke the my-component schematic [schematics-ng-add-index]

  3. Run npm run build

  4. Use ng add my-component in my-test-app

  5. Fini!