为什么我收到以下错误“数据路径“/错误”必须是字符串。 在 angular 中建立我的图书馆？

Question

When i am trying to build my angular-library i am getting the following error: Schema validation failed with the following errors: Data path "/error" must be string. ;

I am getting this error until i migrated from angular 12 to angular 13.

This is my declaration in angular.json in my 'Main-application':

"projectname": {
  "projectType": "library",
  "root": "projects/projectname",
  "sourceRoot": "projects/projectname/src",
  "prefix": "pn",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:ng-packagr",
      "options": {
        "tsConfig": "projects/projectname/tsconfig.lib.json",
        "project": "projects/projectname/ng-package.json",
      },
      "configurations": {
        "production": {
          "tsConfig": "projects/projectname/tsconfig.lib.prod.json"
        }
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "projects/projectname/src/test.ts",
        "tsConfig": "projects/projectname/tsconfig.spec.json",
        "karmaConfig": "projects/projectname/karma.conf.js"
      }
    }
  }
}

This is the package.json of my 'main-application':

  "name": "mainApplication",
  "version": "2.0.0",
  "private": true,
  "devDependencies": {
    "@angular-builders/custom-webpack": "^13.1.0",
    "@angular-devkit/build-angular": "~13.3.0",
    "@angular-eslint/builder": "13.1.0",
    "@angular-eslint/eslint-plugin": "13.1.0",
    "@angular-eslint/eslint-plugin-template": "13.1.0",
    "@angular-eslint/schematics": "^13.1.0",
    "@angular-eslint/template-parser": "13.1.0",
    "@angular/cli": "~13.3.0",
    "@angular/compiler-cli": "~13.3.0",
    "@angular/language-service": "~13.3.0",
    "@biesbjerg/ngx-translate-extract": "^7.0.4",
    "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
    "@types/file-saver": "^2.0.5",
    "@types/hashids": "^2.0.1",
    "@types/moment-timezone": "^0.5.12",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "5.15.0",
    "@typescript-eslint/parser": "5.15.0",
    "autoprefixer": "^10.4.4",
    "eslint": "^8.11.0",
    "eslint-plugin-import": "2.25.4",
    "eslint-plugin-jsdoc": "38.0.4",
    "eslint-plugin-prefer-arrow": "1.2.3",
    "hashids": "^2.2.10",
    "html-webpack-plugin": "^5.5.0",
    "invariant": "^2.2.4",
    "postcss": "^8.4.12",
    "typescript": "~4.6.2",
    "webpack-bundle-analyzer": "^4.5.0"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "ng build",
    "build:dev": "ng build",
    "build:prod": "ng build --configuration production",
    "build:stats": "ng build --stats-json",
    "build:stats-prod": "ng build --stats-json  --configuration production",
    "test": "karma start test/karma.conf.js",
    "serve": "ng serve --hmr --ssl --disable-host-check",
    "analyze": "webpack-bundle-analyzer dist/payweb/de/stats.json",
    "i18n": "ng xi18n --ivy --output-path app/i18n/ --format xliff2",
    "i18n:extract": "find ./app/components/ -name 'i18n' -type d -exec ngx-translate-extract -i {}/../ -o {}/de.json --key-as-default-value -f namespaced-json --fi '  ' \\;",
    "i18n:init": "find ./app/components/ -name 'i18n' -type d -exec ngx-translate-extract -i {}/../ -o {}/template.json  --replace --key-as-default-value -f namespaced-json --fi '  ' \\;"
  },
  "dependencies": {
    "@angular/animations": "^13.3.0",
    "@angular/cdk": "^13.3.0",
    "@angular/common": "^13.3.0",
    "@angular/compiler": "^13.3.0",
    "@angular/core": "^13.3.0",
    "@angular/flex-layout": "^13.0.0-beta.38",
    "@angular/forms": "^13.3.0",
    "@angular/localize": "^13.3.0",
    "@angular/material": "~13.3.0",
    "@angular/material-moment-adapter": "^13.3.0",
    "@angular/platform-browser": "^13.3.0",
    "@angular/platform-browser-dynamic": "^13.3.0",
    "@angular/router": "^13.3.0",
    "@ngrx/component": "^13.0.2",
    "@ngrx/effects": "^13.0.2",
    "@ngrx/entity": "^13.0.2",
    "@ngrx/router-store": "^13.0.2",
    "@ngrx/schematics": "^13.0.2",
    "@ngrx/store": "^13.0.2",
    "@ngrx/store-devtools": "^13.0.2",
    "@ngx-translate/core": "^14.0.0",
    "compare-versions": "^4.1.3",
    "file-saver": "^2.0.5",
    "messageformat": "^2.3.0",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.34",
    "ng-packagr": "^13.3.0",
    "ngx-file-helpers": "^7.0.0",
    "ngx-filesaver": "^13.0.0",
    "ngx-moment": "^6.0.2",
    "ngx-translate-messageformat-compiler": "^5.0.1",
    "rxjs": "^7.5.5",
    "tslib": "^2.3.1",
    "uuid": "^8.3.2",
    "zone.js": "~0.11.5"
  }

This is my package.json in my library:

{
  "name": "projectname",
  "version": "0.0.2",
  "peerDependencies": {
    "@angular/common": "^13.3.0",
    "@angular/core": "^13.3.0",
    "tslib": "^2.3.1"
  }
}

If you need further information let me know.

Answer 1

I had the same error and found the solution for my context.

Context

I have a mono-repo with applications and libraries. Libraries are split into sub-libraries.

▾ libraries/
  ▾ my-library/
    ▾ src/
      ▾ lib/
        ▾ sub-library-1/
            sub-library-1.module.ts
            package.json
        ▾ sub-library-2/
            sub-library-2.module.ts
            package.json
        ▾ sub-library-3/
            sub-library-3.module.ts
            package.json
        ▾ sub-library-4/
            sub-library-4.module.ts
            package.json
        index.ts
      ng-package.json
      package.json

Outside the library the inner library structure is hidden so if an application consumes a member of sub-library-3 it just needs to:

import { Member } from 'my-library'

But if an inner library consumes another inner library, eg:

Member of sub-library-2 consumes a Member of sub-library-3 , the import should be absolute:

import { Member of sub-library-3 } from 'my-library/src/lib/sub-library-3';

Problem

I got this error because I was wrongly using a relative path:

import { Member of sub-library-3 } from '../sub-library-3';

Solution

Changing it to use an absolute path, fixed the problem

import { Member of sub-library-3 } from 'my-library/src/lib/sub-library-3';

This might not be your exact case as the error could occur due to a wrong import in very different contexts but in my experience, most of these kinds of problems have been caused by a wrong import path.

Hope this helps

Answer 2

In case someone are still scratching your head after reading the previous answers.

I have a similar issue when upgrading to angular13. Several libraries, the libraries are located under projects folder. Got the same error when compiling a lib2 that depends on lib1. Lib1 passed well, but lib2 didn't.

FYI, Using projects/... , ie the absolute path, didn't fix my problem.

I fixed it by publishing the lib1, then added the lib in package.json, then in typescript, import the lib as all other libs such as:

In package.json dependencies section:

"lib1": "latest",

in my comp.ts:

import { MyItem } from 'lib1';