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?

Keven

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'

Abatis

The value for "katex" should be the exposed window object or default export, e.g. "katex": "katex", see github.com/ng-packagr/ng-packagr/blob/master/docs/… – Brockbrocken

You are right. Anyhow using the version seems to work as well, with no errors and proper rendering. I will update my answer. – Abatis

How do we find the umdmoduleid of external library? – Irmairme

This is the solution for external libraries but what should we do for tsconfig paths? They're not replaced when compiled. – Ummersen

This is for simple package name, in my case I cannot get rid of the warning for "@fortawesome/angular-fontawesome": "@fortawesome/angular-fontawesome" , I also tried "@fortawesome/angular-fontawesome": "fortawesome.angular-fontawesome" and did not work! – Coniah

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.

Alenealenson

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

Applesauce

+1 for the wildcard example (@libs/*) in tsconfig. However, you almost surely don't want paths in the values for umdModuleIds. Those paths will show up in your UMD js output (take a look), and you probably don't want those paths in your javascript. Instead you want the UMD global variable to match up with the UMD global variable registered in the build output of your lib - probably: "umdModuleIds": { "@libs/shared":"libs.shared" ... } – Togo