0

I have checked Collection “@schematics/angular” cannot be resolved and it's not duplicate.

I have created my own schematics and when I try to use it using ng add @candiman/website@0.0.5-beta.3 I am getting below errors.

I think the problem is collection.json not packaged and shipped to the npm package as ng-packgr does not include JSON files

So, physical collection.json is not present in the npm package folder and when schematics search for collection.json file it fails.

Collection "@candiman/website" cannot be resolved.
Error: Collection "@candiman/website" cannot be resolved.
    at NodeModulesEngineHost._resolveCollectionPath (/Users/aniruddh/aniruddh/develop/experiment/schematics-exp/sche-ex1/node_modules/@angular-devkit/schematics/tools/node-module-engine-host.js:91:15)
    at NodeModulesEngineHost.createCollectionDescription (/Users/aniruddh/aniruddh/develop/experiment/schematics-exp/sche-ex1/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js:111:27)
    at SchematicEngine._createCollectionDescription (/Users/aniruddh/aniruddh/develop/experiment/schematics-exp/sche-ex1/node_modules/@angular-devkit/schematics/src/engine/engine.js:147:40)
    at SchematicEngine.createCollection (/Users/aniruddh/aniruddh/develop/experiment/schematics-exp/sche-ex1/node_modules/@angular-devkit/schematics/src/engine/engine.js:140:43)
    at AddCommand.getCollection (/Users/aniruddh/aniruddh/develop/experiment/schematics-exp/sche-ex1/node_modules/@angular/cli/models/schematic-command.js:123:35)
    at AddCommand.runSchematic (/Users/aniruddh/aniruddh/develop/experiment/schematics-exp/sche-ex1/node_modules/@angular/cli/models/schematic-command.js:262:50)
    at AddCommand.executeSchematic (/Users/aniruddh/aniruddh/develop/experiment/schematics-exp/sche-ex1/node_modules/@angular/cli/commands/add-impl.js:134:31)
    at AddCommand.run (/Users/aniruddh/aniruddh/develop/experiment/schematics-exp/sche-ex1/node_modules/@angular/cli/commands/add-impl.js:105:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)

@candiman/website@0.0.5-beta.3 with schematics is available in npm now, if anyone wants to give a try.

The source code of the angular library can be found at project source which publishes npm package with schematics

Aniruddha Das
  • 20,520
  • 23
  • 96
  • 132

2 Answers2

0

That's because the package.json file of the dependency that you have stated does not have the schematics property that is a path to the schematics definition file (a JSON file):

{
  "name": "@candiman/website",
  "version": "0.0.5",
  "peerDependencies": {
    "@angular/common": "^7.1.0",
    "@angular/core": "^7.1.0",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "@fortawesome/angular-fontawesome": "0.1.0-9",
    "@fortawesome/fontawesome-svg-core": "^1.2.0-11",
    "@fortawesome/free-solid-svg-icons": "^5.1.0-8",
    "@fortawesome/free-regular-svg-icons": "^5.1.0-8",
    "@fortawesome/free-brands-svg-icons": "5.1.0-8",
    "bootstrap": "^4.0.0"
  },
  "main": "bundles/candiman-website.umd.js",
  "module": "fesm5/candiman-website.js",
  "es2015": "fesm2015/candiman-website.js",
  "esm5": "esm5/candiman-website.js",
  "esm2015": "esm2015/candiman-website.js",
  "fesm5": "fesm5/candiman-website.js",
  "fesm2015": "fesm2015/candiman-website.js",
  "typings": "candiman-website.d.ts",
  "metadata": "candiman-website.metadata.json",
  "sideEffects": false,
  "dependencies": {
    "tslib": "^1.9.0"
  }
}

See your package's package.json file (on Unpkg) for more info.

See below for an example on how your package's schematics should be declared:

{
  "name": "@candiman/website",
  "version": "0.0.5",
  "peerDependencies": {
    "@angular/common": "^7.1.0",
    "@angular/core": "^7.1.0",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "@fortawesome/angular-fontawesome": "0.1.0-9",
    "@fortawesome/fontawesome-svg-core": "^1.2.0-11",
    "@fortawesome/free-solid-svg-icons": "^5.1.0-8",
    "@fortawesome/free-regular-svg-icons": "^5.1.0-8",
    "@fortawesome/free-brands-svg-icons": "5.1.0-8",
    "bootstrap": "^4.0.0"
  },
  "schematics": "./path/to/schematics.json",
  "dependencies": {
    "tslib": "^1.9.0"
  }
}

Which would result in something like this when running ng build project-name --prod:

{
  "name": "@candiman/website",
  "version": "0.0.5",
  "peerDependencies": {
    "@angular/common": "^7.1.0",
    "@angular/core": "^7.1.0",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "@fortawesome/angular-fontawesome": "0.1.0-9",
    "@fortawesome/fontawesome-svg-core": "^1.2.0-11",
    "@fortawesome/free-solid-svg-icons": "^5.1.0-8",
    "@fortawesome/free-regular-svg-icons": "^5.1.0-8",
    "@fortawesome/free-brands-svg-icons": "5.1.0-8",
    "bootstrap": "^4.0.0"
  },
  "schematics": "./path/to/schematics.json",
  "main": "bundles/candiman-website.umd.js",
  "module": "fesm5/candiman-website.js",
  "es2015": "fesm2015/candiman-website.js",
  "esm5": "esm5/candiman-website.js",
  "esm2015": "esm2015/candiman-website.js",
  "fesm5": "fesm5/candiman-website.js",
  "fesm2015": "fesm2015/candiman-website.js",
  "typings": "candiman-website.d.ts",
  "metadata": "candiman-website.metadata.json",
  "sideEffects": false,
  "dependencies": {
    "tslib": "^1.9.0"
  }
}
Edric
  • 24,639
  • 13
  • 81
  • 91
  • I think the problem is `collection.json` not published as part of the package as `ng-packeger` does not include json file. Not sure though. – Aniruddha Das Mar 24 '19 at 06:30
  • You're supposed to have some way of automatically copying the necessary schematics-related files to the dist folder of your package as `ng-packagr` currently doesn't do that for you (although there's currently an issue about this topic: https://github.com/ng-packagr/ng-packagr/issues/1180) – Edric Mar 24 '19 at 08:41
  • I think that is not a problem. my package.json holds the link to the collection.json but the physical collection.json is not present in the npm package folder as ng-packager does not compile/move json file. please try `@candiman/website@0.0.5-beta.3` – Aniruddha Das Mar 24 '19 at 15:45
0

I had the same problem following the example from this link. https://angular.io/guide/schematics-for-libraries#building-your-schematics

The copy:collection script in the library's project root folder shows this: "copy:collection": "cp schematics/collection.json ../../dist/my-lib/schematics/collection.json" which creates an unecessary subfolder named collection.json

I changed this script to "copy:collection": "cp schematics/collection.json ../../dist/my-lib/schematics" and it copies the collection.json file into the schematics folder where it can be found.

Fred Baine
  • 1
  • 1