Angular Library with proper sub-entries

Question

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?

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

2. 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';