3

I am trying to build an Angular library following documentation but unfortunately I am getting some issues while building it.

There are 2 main issues I am facing:

1st issue: Modules of the library are exported with full path

import MyComponentModule from '@my/components/lib/my-component/my-component.module

while it should be

import MyComponentModule from '@my/components/my-component

2nd issue: I am unable to compile the app that is using the library

I am getting a compilation error saying that @my/components/lib/my-component/my-component.module can't be resolved even though I see it in node_modules.

What am I doing wrong? :(

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "paths": {
      "@my/components/*": [
        "projects/components/src/*",
        "projects/components/src"
      ],
      "@my/components": [
        "dist/components/*",
        "dist/components"
      ]
    },
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

// projects/components/package.json
{
  "name": "@my/components",
  "version": "1.0.0",
  "peerDependencies": {
    "@angular/common": "11",
    "@angular/core": "11"
  },
  "dependencies": {
    "tslib": "^2.0.0"
  }
}

// projects/components/ng-package.json
{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/components",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}

// projects/components/src/public-api.ts
export * from './lib/my-component';

// projects/components/src/lib/my-component/index.ts
export * from './public-api'

// projects/components/src/lib/my-component/public-api.ts
export * from './my-component.module';
export * from './my-component.component';

// projects/components/src/lib/my-component/package.json
{
  "ngPackage": {
    "lib": {
      "entryFile": "public-api.ts",
      "cssUrl": "inline"
    }
  }
}

Yet, while building the library using the CLI I see it builds 2 things:

  • @my/components, and
  • @my/components/src/lib/my-component // Shouldn't this be @my/components/my-component?

Can anyone tell me what I am missing here?

Milos Miskone Sretin
  • 1,748
  • 2
  • 25
  • 46
  • The second message seems to result from the first message. – Constantin Konstantinidis Jun 02 '21 at 05:33
  • This section of the [documentation](https://angular.io/guide/creating-libraries#use-typescript-path-mapping-for-peer-dependencies) might help. The `export` statement in the code uses relative paths, . notation, when paths using @ are used elsewhere. – Constantin Konstantinidis Jun 02 '21 at 05:34
  • I think your first and second problems are related. You are most likely importing your library from source rather than build. Please check that you are importing the library produced by the build. – Fmerco Jun 02 '21 at 14:17

1 Answers1

1
  1. since you are using * it is exporting everything as is, you can specify the file instead.
"paths": {
      "@my/components/my-component": [
        "projects/components/src/lib/my-component/public-api.ts",
      ],
    },
  1. Because of the * there is no default you have to use brackets around it so it can find the reference.
import { MyComponentModule } from '@my/components/my-component';
ebv
  • 402
  • 2
  • 5