Angular(7) extending schematics

Question

I have several components for which I wrote some schematics for installing that components. For maintainability my schematics are in a separate package.

After merging my schematics from Angular6 to Angular7 my schematics cannot be found.

So in my "package.json" of my component:

    {
      "name": "@my-project/my-component",
      "version": "4.0.0",
      "dependencies": {
        "@my-project/schematics": "^2.0.0",
        "tslib": "^1.9.0"
      },
      "peerDependencies": {
        "@angular/common": "^7.0.0",
        "@angular/core": "^7.0.0"
      },
      "schematics": "./schematics/collection.json",
    }

In "./schematics/collection.json":

    {
      "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
      "schematics": {
        "ng-add": {
          "extends" : "@my-project/schematics:my-component-install"
        }
      }
    }

The "collections.json" of @my-project/schematics:

    {
      "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
      "schematics": {
          "my-component-install": {
          "description": "Schematics for installation of @my-project/my-component",
          "schema": "./my-component/install/schema.json",
          "factory": "./my-component/install/index"
        }
      }
    }

So when executing "ng add @my-project/my-component" I get the message:

'Schematic "my-component-install" not found in collection "@my-project/my-comonent".'

However in Angular6 this worked.

Can anyone tell me how to fix this?

score 1 · Answer 1 · answered Dec 21 '18 at 20:08

1

I am a little confused with your structure, but I’ll give my best shot — So if you have a schematics, let’s say ‘my-schematics’ and it has ‘ng-add’ as a schematic. ‘my-schematics’ extends angular schematics, so it can do whatever angular schematics can do, but with additional logic. This is what the collection.json of ‘my-schematics’ would look like -

{
    “$schema”:.....
    “extends”: [
        “@schematics/angular”
    ],
    “schematics”: {
        “ng-add”: { 
            “description”:.., “factory”:..., “schema”:...
         }
     }
}

Now in your project you can call my-schematics:ng-add (and also my-schematics:component or any other angular schematic function)

answered Dec 21 '18 at 20:08

Chhirag Kataria

278
1
9

I am trying this approach but I keep getting an error which states Error: Could not find (undefined) at Object.getWorkspace (~\node_modules\@schematics\angular\utility\config.js:22:15) Any thoughts? – Jose Villalobos Mar 08 '19 at 19:50
It worked, thanks Chhirag, I was trying to debug this and I was missing the angular.json file to make the commands behave properly. – Jose Villalobos Mar 12 '19 at 19:24
@Joe Walker glad it worked for you, apologies for late reply. Marking this the right answer would help ;) – Chhirag Kataria Mar 13 '19 at 20:03

Angular(7) extending schematics

1 Answers1