ng-packagr提供的外部模块没有提供名称

Question

ng-packagr提供的外部模块没有提供名称

angularng-packagr

29

当使用ng-packagr打包@my/common-util项目时，没有问题。这个类包含一个名为AbstractPerson的抽象类，在abstract-person.ts中。

在另一个名为@my/common-impl的项目中创建了另一个继承AbstractPerson并使用@my/common-util包名导入它的Person类。当我使用ng-packagr对其进行打包时，会出现以下错误 ->

在options.globals中未提供外部模块'@my/common/abstract-person'的名称 - 猜测为'abstractPerson'

由于看起来这是一个警告，我继续将@my/common和@my/common-impl都安装到另一个项目中，但是当我从@my/common-impl导入Person类时，会出现以下错误

ERROR in ./node_modules/@my/common-impl/esm5/common-impl.js Module not found: Error: Can't resolve '@my/common/abst ract-person' in 'C:\Data\me\node_modules\@my\common-impl\e sm5' resolve '@my/common/abstract-person' in 'C:\Data\me\node_modules\@my\common-impl\esm5' Parsed request is a module using description file: C:\Data\me\node_modules\@my\co mmon-impl\package.json (relative path: ./esm5) Field 'browser' doesn't contain a valid alias configuration after using description file: C:\Data\me\node_modules\@my\common-impl\package.json (relative path: ./esm5) resolve as module 我尝试了几种方法，比如在package.json中使用externals、globals、umdModuleIds（见下文），但这些都没有起作用。

以下是package.json

{
  "name": "@my/common-impl",
  "version": "1.0.0-alpha.0",
  "private": true,
  "dependencies": {
    "@my/common": "1.0.0-alpha.0"
  },
  "peerDependencies": {
    "lodash": "^4.17.4"
  },
  "ngPackage": {
    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
    "dest": "dist/common-impl",
    "workingDirectory": "../.ng_build",
    "lib": {
      "entryFile": "src/public_api.ts",
      "externals": [
        "@my/common/abstract-person" 
      ],
      "globals": {
        "@my/common/abstract-person": "AbstractPerson"
      },
      "umdModuleIds": {
        "abstract-person" : "AbstractPerson"

      }
    }
  }
}

这需要进一步的纠正措施吗？

- AngularAngle

3个回答

3

你应该在库中使用tsconfig.lib.json的"paths"属性。

这是问题所在：

我将我的库1和库2添加到我的monorepo项目文件夹中。

project:
   -> library1 
       -> tsconfig.lib.json
       -> ...
   -> library2 
       -> tsconfig.lib.json
       -> ...
   -> tsconfig.json 
   -> ...

tsconfig.json

{
  ...
  "compilerOptions": {
    ...
    "paths": {
      "library1": [
      "../dist/library1"
    ],
      "library2": [
      "../dist/library2"
    ],
  },
}

我在library2的代码中使用了import {lib1Module} from 'library1'。为了解决no module lib1Module found错误，我覆盖了library2的tsconfig.lib.json文件中的library1路径。

tsconfig.lib.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    ...
    "paths": {
      "library1": [
      "../../../dist/library1"
    ]
  },
  ...
},

如果你使用paths属性而不是"umdModuleIds"、"globals"和"externals"，你的问题可能会得到解决。

最后我应该提到这个事实，"externals"在ng-packagr schema中已经不存在了。

- Hasan Beheshti

1

在我的情况下，我用这种方式解决了警告。

ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/test-lib",
  "lib": {
    "entryFile": "src/public-api.ts",
    "umdModuleIds": {
      "@libs/shared": "../../dist/shared",
      "@libs/animations": "../../dist/animations",
      "saturn-datepicker": "saturn-datepicker",
      "moment": "moment"
    }
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "es2019",
      "dom"
    ],
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "@app/*": [ "projects/test-app/src/app/*" ],
      "@libs/*": [ "dist/*" ],
      "shared": [ "dist/shared" ],
      "shared/*": [ "dist/shared/*" ],
      "animations": [ "dist/animations" ],
      "animations/*": [ "dist/animations/*" ],
    }
  }
}

- user6600549

在tsconfig中，通配符示例（@libs/*）是一个好的选择。但是，您几乎肯定不希望在umdModuleIds的值中包含路径。这些路径将出现在您的UMD js输出中（请查看），您可能不希望在JavaScript中出现这些路径。相反，您希望UMD全局变量与在构建输出中注册的UMD全局变量匹配 - 可能是：“umdModuleIds”：{“@libs/shared”：“libs.shared”...} - crimbo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Felix Lemke · Accepted Answer

我正在使用一个名为katex的npm模块。将其添加到./projects/myLibname/ng-package.json中的umdModuleIds中适用于我。

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/documentations",
  "lib": {
    "entryFile": "src/public_api.ts",
    "umdModuleIds": {
      "katex": "katex"
    }
  }
}

这使得下面的警告消失了

在 output.globals 中，未为外部模块“katex”提供名称 - 猜测为“katex”