ng-packagr gives No name was provided for external module

Question

When using ng-packagr to package up one project @my/common-util, there are no problems. This class contains an abstract class called AbstractPerson in abstract-person.ts.

In another project called @my/common-impl, another Person class was created which extends AbstractPerson and imports it using @my/common-util package name. When I use ng-packagr to package it, i get the following error -->

No name was provided for external module '@my/common/abstract-person' in options.globals - guessing 'abstractPerson'

As it seemed that it was a warning, I continue to npm install both @my/common and @my/common-impl into another project, but get the following error when I import Person class from @my/common-impl

---

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

---

I have tried several things like externals, globals, umdModuleIds in package.json (see following), but none of these have worked.

Here is 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"

      }
    }
  }
}

---

What further is required for this to be rectified?

Answer 1

I was working with an npm module called katex. Adding this to the umdModuleIds in the ./projects/myLibname/ng-package.json worked for me.

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

This made the following warning disappear

No name was provided for external module 'katex' in output.globals – guessing 'katex'

Answer 2

You should use "paths" property of tsconfig.lib.json in your library.

This is the issue:

I add my library1 and library2 in my monorepo project folder.

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

tsconfig.json

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

And i used import {lib1Module} from 'library1' in library2 code. for resolving no module lib1Module found error i ovveride library1 path in library2 tsconfig.lib.json

tsconfig.lib.json

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

Probably your issue will be resolve if you using paths property instead of "umdModuleIds", "globals" and "externals"

And finally i should mention this fact, "externals" no longer exist in ng-packagr schema.

Answer 3

In my case I solved the warnings with this way.

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/*" ],
    }
  }
}