feature: provide an `ng add` schematic

[d-koppenhagen]

It would be great when there will be an ng add schematic that can be used without installation of the collection first (even using npx).

Therefore, the collection should just include the ng-add name that can reference the existing schematic:

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "ng-add": {
      "description": "A schematic to migrate from CSS to SCSS stylesheet format for an Angular CLI project",
      "factory": "./scss-migrate/index#scssMigrate",
      "schema": "./scss-migrate/schema.json"
    },
    "scss-migrate": {
      "description": "A schematic to migrate from CSS to SCSS stylesheet format for an Angular CLI project",
      "factory": "./scss-migrate/index#scssMigrate",
      "schema": "./scss-migrate/schema.json"
    }
  }
}

The benefit would be that the migration can just be performed by:

npx @angular/cli add scss-migrate

So no need to run npm i --save-dev schematics-scss-migrate before

[Teebo]

@d-koppenhagen thank you, I have added support for the ng add command.
But please note that the alluded benefit below:

The benefit would be that the migration can just be performed by:

npx @angular/cli add scss-migrate

This would not work because it implies adding the schematic itself not the package defining the schematic, so that will raise a 404 error from the NPM registry.

So doing ng add schematics-scss-migrate will work, and it will install the package in the devDependencies.
Setting the ng-add schematic to not to install the package at all does not work:

  "ng-add": {
    "save": false   // does not work
  }

  "ng-add": {
    "save": "devDependencies"  // works
  }

The CLI requires that the package be present in the node_modules.
Unless I am missing something, maybe I am and any feedback is appreciated.

[d-koppenhagen]

Ah, the package name was wrong. I can confirm that it works as follows:

$ ng new playground-workspace --routing --style=css
$ cd playground-workspace
$ npx @angular/cli add schematics-scss-migrate
Installing packages for tooling via npm.
Installed packages for tooling via npm.
✔ Packages installed successfully.
Nothing to be done.

But the registered ng-add schematic from this commit does nothing: 55eddf0

You can just change the referencs from factory inside ng-add in you collection.json and point to the other schematic (as described initially).

[Teebo]

@d-koppenhagen Thank you that seems to work! though it seems to need the package installed even when the below command is used:
npx @angular/cli add schematics-scss-migrate

And realized a shorter version of the above command is:
ng add schematics-scss-migrate

So the change at least removes the step to run the schematic manually using ng g schematics-scss-migrate:scss-migrate.
I am not sure if there's something we still can do?

[d-koppenhagen]

do you really have to install it before? That should already be part of ng add.
The way you described is shorter indeed. But different also:

• ng add works wich the specific Angular version that's installed in the workspace
• npx @angular/cli (as everything executed with npx) will temp install the latest version of Angular CLI and use the schematics execution from it.

[d-koppenhagen]

$ ng new playground-workspace --routing --style=css
$ cd playground-workspace
$ ng add schematics-scss-migrate
Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Which stylesheet format are you migrating from? css
? Which stylesheet format are you migrating to? scss
RENAME src/styles.css => src/styles.scss
RENAME src/app/app.component.css => src/app/app.component.scss
UPDATE angular.json (3061 bytes)
UPDATE src/app/app.component.ts (225 bytes)

[Teebo]

Oh yes, I agree, if you're happy with the latest then we can close the issue unless there's still more to be done?