ng add igniteui-angular adds igniteui-cli package to both dependencies and devDependencies.

[tkiryu]

Description

ng add igniteui-angular adds igniteui-cli package to both dependencies and devDependencies.

• igniteui-angular version: 7.0.2
• browser: N/A

Steps to reproduce

1. ng add igniteui-angular

Result

{
  "name": "test-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@types/hammerjs": "^2.0.36",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "igniteui-angular": "^7.0.2",
    "igniteui-cli": "~3.1.0", <--------- here
    "jszip": "^3.1.5",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.0",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "igniteui-cli": "~3.1.0", <--------- and here
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

Expected result

ng add igniteui-angular should add igniteui-cli package only to devDependencies.

Attachments

None.

[tkiryu]

@SlavUI , I think this issue should be handled on this repo because ng-add/index.ts adds depencendies/devDependencies to package.json.

https://github.com/IgniteUI/igniteui-angular/blob/7.0.2/projects/igniteui-angular/schematics/ng-add/index.ts#L24-L46

function addDependencies(options: Options): Rule {
  return (tree: Tree, context: SchematicContext) => {
    const pkgJson = require('../../package.json');

    Object.keys(pkgJson.dependencies).forEach(pkg => {
      const version = pkgJson.dependencies[pkg];
      switch (pkg) {
        case 'hammerjs':
          addPackageJsonDependency(tree, pkg, version);
          addHammerJsToWorkspace(tree);
          LogIncludingDependency(context, pkg, version);
          break;
        default:
          addPackageJsonDependency(tree, pkg, version);
          LogIncludingDependency(context, pkg, version);
          break;
      }
    });

    addPackageToJsonDevDependency(tree, 'igniteui-cli', pkgJson.optionalDependencies['igniteui-cli']);
    return tree;
  };
}

[tkiryu]

I think I found the root cause.

I checked igniteui-angular@7.0.2's package.json and it turned out igniteui-cli is added to both dependencies and optionalDependencies.

That's way this issue is occurring.

// node_modules/igniteui-angular/package.json
{
  "_from": "igniteui-angular",
  "_id": "igniteui-angular@7.0.2",
  "_inBundle": false,
  "_integrity": "sha512-YeVo+ZEqQ6QXUAocey+aZKaR7RRGn4xswZMht227I7gVqL8dn+RbusvfwqNrBUZBe4J8CLZ++trV9erJdaQx+w==",
  "_location": "/igniteui-angular",
  "_phantomChildren": {},
  "_requested": {
    "type": "tag",
    "registry": true,
    "raw": "igniteui-angular",
    "name": "igniteui-angular",
    "escapedName": "igniteui-angular",
    "rawSpec": "",
    "saveSpec": null,
    "fetchSpec": "latest"
  },
  "_requiredBy": [
    "#USER",
    "/"
  ],
  "_resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-7.0.2.tgz",
  "_shasum": "333ac2bb4d64c82c06b63dc644615a7c6243b588",
  "_spec": "igniteui-angular",
  "_where": "/Users/kiryu/Downloads/test-app",
  "author": {
    "name": "Infragistics"
  },
  "bugs": {
    "url": "https://github.com/IgniteUI/igniteui-angular/issues"
  },
  "bundleDependencies": false,
  "dependencies": {
    "@types/hammerjs": "^2.0.36",
    "hammerjs": "^2.0.8",
    "igniteui-cli": "~3.1.0",
    "jszip": "^3.1.5",
    "tslib": "^1.9.0"
  },
  "deprecated": false,
  "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
  "es2015": "fesm2015/igniteui-angular.js",
  "esm2015": "esm2015/igniteui-angular.js",
  "esm5": "esm5/igniteui-angular.js",
  "fesm2015": "fesm2015/igniteui-angular.js",
  "fesm5": "fesm5/igniteui-angular.js",
  "homepage": "https://github.com/IgniteUI/igniteui-angular#readme",
  "keywords": [
    "angular",
    "angular6",
    "UI components",
    "grid",
    "combo",
    "drop down",
    "list",
    "tabs",
    "calendar",
    "date picker",
    "datepicker",
    "time picker",
    "timepicker",
    "dialog",
    "navbar",
    "navdrawer",
    "toggle",
    "carousel",
    "avatar",
    "badge",
    "card",
    "checkbox",
    "switch",
    "input",
    "bottom nav",
    "mask",
    "button",
    "radio",
    "drag drop",
    "drag",
    "drop",
    "chips",
    "chip",
    "icon",
    "progress bar",
    "circular progress",
    "linear progress",
    "slider",
    "toast",
    "snackbar",
    "excel export",
    "csv export"
  ],
  "license": "Apache-2.0",
  "main": "bundles/igniteui-angular.umd.js",
  "metadata": "igniteui-angular.metadata.json",
  "module": "fesm5/igniteui-angular.js",
  "name": "igniteui-angular",
  "ng-update": {
    "migrations": "./migrations/migration-collection.json"
  },
  "optionalDependencies": {
    "igniteui-cli": "~3.1.0"
  },
  "peerDependencies": {
    "@angular/common": "^7.0.3",
    "@angular/core": "^7.0.3",
    "@angular/animations": "^7.0.3",
    "@angular/forms": "^7.0.3",
    "web-animations-js": "^2.3.1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/IgniteUI/igniteui-angular.git"
  },
  "schematics": "./schematics/collection.json",
  "sideEffects": false,
  "typings": "igniteui-angular.d.ts",
  "version": "7.0.2"
}

[damyanpetev]

Actual cause is pretty simple - optional dependencies get moved to dependencies during the npm install process.
The goal was just to keep the Ignite UI CLI version as a configuration in the package.json, so we'll move it to dev dependencies.