集合“@candiman/website”无法解析

Question

我检查了Collection “@schematics/angular” cannot be resolved ，它不是重复的。

我创建了自己的原理图，当我尝试使用 ng add @candiman/website@0.0.5-beta.3 使用它时，我遇到了以下错误。

我认为问题在于collection.json 没有打包并运送到npm package，因为ng-packgr 不包含JSON 文件

因此，物理 collection.json 不存在于 npm 包文件夹中，当原理图搜索 collection.json 文件时失败。

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 的原理图现在可以在npm 获得，如果有人想尝试一下。

angular库的源码可以在project source which publishes npm package with schematics找到

Answer 1

这是因为您声明的依赖项的package.json 文件没有schematics 属性，该属性是原理图定义文件（JSON 文件）的路径：

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

请查看您包裹的package.json file (on Unpkg) 了解更多信息。

请参阅下面的示例，了解如何声明包的原理图：

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

运行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"
  }
}

Answer 2

按照此链接中的示例，我遇到了同样的问题。 https://angular.io/guide/schematics-for-libraries#building-your-schematics

库项目根文件夹中的 copy:collection 脚本显示如下： "copy:collection": "cp schematics/collection.json ../../dist/my-lib/schematics/collection.json" 这会创建一个名为 collection.json 的不必要的子文件夹

我将此脚本更改为 "copy:collection": "cp schematics/collection.json ../../dist/my-lib/schematics" 并将 collection.json 文件复制到可以找到它的原理图文件夹中。