Angular MonoRepo Secondary Enpoints with different paths

89 views Asked by At

I have a monorep using @nx and @angular and I have setup a folder structure as follows:

libs
- ui-components
--_components
---atoms
----alert
---molecules
----datepicker
--alert
--datepicker

As you can see, all folders and files reside in the ui-components folder. In my tsconfig.base.json I have setup secondary endpoints for the library root components as follows:

"@library-name/ui-components/alert": ["libs/ui-components/alert/index.ts"],
"@library-name/ui-components/datepicker": ["libs/ui-components/datepicker/index.ts"],

and in those root folders I just have an index.ts and a ng-package.json. The index.ts is pointing to the _components folder at the respective component like this:

export * from '../_components/atoms/alert';

If I run my project or storybook, it works fine. But if I try to build the project, I get this error:

/_components/atoms/alert/index.ts' is not under 'rootDir' '

I have tried many ways to solve this. One way was to add a ng-package.json to the actual component (in /_components/atoms/alert/) and then change the <rootDir>/alert/index.ts to this:

export * from '@library-name/ui-components/_components/atoms/alert';

While this does work, it causes the built library to have 2 endpoints, 1 in root and 1 in the _components directory. This might not seem like an issue, but GitLab has a character count limit for package.json and having duplicates puts us over that limit.

So, I need to solve this without using secondary entries. Anyone have any ideas?


https://github.com/r3plica/angular-storybook-tailwind-nx

If you build that project, you will see this in package.json (for the ui-components library)

{
  "name": "@angular-storybook-tailwind-nx/ui-components",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^16.2.0",
    "@angular/core": "^16.2.0"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  },
  "sideEffects": false,
  "module": "esm2022/angular-storybook-tailwind-nx-ui-components.mjs",
  "typings": "index.d.ts",
  "exports": {
    "./package.json": {
      "default": "./package.json"
    },
    ".": {
      "esm2022": "./esm2022/angular-storybook-tailwind-nx-ui-components.mjs",
      "esm": "./esm2022/angular-storybook-tailwind-nx-ui-components.mjs",
      "default": "./esm2022/angular-storybook-tailwind-nx-ui-components.mjs"
    },
    "./badge": {
      "esm2022": "./esm2022/badge/angular-storybook-tailwind-nx-ui-components-badge.mjs",
      "esm": "./esm2022/badge/angular-storybook-tailwind-nx-ui-components-badge.mjs",
      "default": "./esm2022/badge/angular-storybook-tailwind-nx-ui-components-badge.mjs"
    },
    "./button": {
      "esm2022": "./esm2022/button/angular-storybook-tailwind-nx-ui-components-button.mjs",
      "esm": "./esm2022/button/angular-storybook-tailwind-nx-ui-components-button.mjs",
      "default": "./esm2022/button/angular-storybook-tailwind-nx-ui-components-button.mjs"
    },
    "./header": {
      "esm2022": "./esm2022/header/angular-storybook-tailwind-nx-ui-components-header.mjs",
      "esm": "./esm2022/header/angular-storybook-tailwind-nx-ui-components-header.mjs",
      "default": "./esm2022/header/angular-storybook-tailwind-nx-ui-components-header.mjs"
    },
    "./layout": {
      "esm2022": "./esm2022/layout/angular-storybook-tailwind-nx-ui-components-layout.mjs",
      "esm": "./esm2022/layout/angular-storybook-tailwind-nx-ui-components-layout.mjs",
      "default": "./esm2022/layout/angular-storybook-tailwind-nx-ui-components-layout.mjs"
    },
    "./_components/atoms/badge": {
      "esm2022": "./esm2022/_components/atoms/badge/angular-storybook-tailwind-nx-ui-components-_components-atoms-badge.mjs",
      "esm": "./esm2022/_components/atoms/badge/angular-storybook-tailwind-nx-ui-components-_components-atoms-badge.mjs",
      "default": "./esm2022/_components/atoms/badge/angular-storybook-tailwind-nx-ui-components-_components-atoms-badge.mjs"
    },
    "./_components/atoms/button": {
      "esm2022": "./esm2022/_components/atoms/button/angular-storybook-tailwind-nx-ui-components-_components-atoms-button.mjs",
      "esm": "./esm2022/_components/atoms/button/angular-storybook-tailwind-nx-ui-components-_components-atoms-button.mjs",
      "default": "./esm2022/_components/atoms/button/angular-storybook-tailwind-nx-ui-components-_components-atoms-button.mjs"
    },
    "./_components/templates/header": {
      "esm2022": "./esm2022/_components/templates/header/angular-storybook-tailwind-nx-ui-components-_components-templates-header.mjs",
      "esm": "./esm2022/_components/templates/header/angular-storybook-tailwind-nx-ui-components-_components-templates-header.mjs",
      "default": "./esm2022/_components/templates/header/angular-storybook-tailwind-nx-ui-components-_components-templates-header.mjs"
    },
    "./_components/templates/layout": {
      "esm2022": "./esm2022/_components/templates/layout/angular-storybook-tailwind-nx-ui-components-_components-templates-layout.mjs",
      "esm": "./esm2022/_components/templates/layout/angular-storybook-tailwind-nx-ui-components-_components-templates-layout.mjs",
      "default": "./esm2022/_components/templates/layout/angular-storybook-tailwind-nx-ui-components-_components-templates-layout.mjs"
    }
  }
}

Note the double endpoints for each component. I don't want the "internal" endpoints (any that have the _components directly in them)

0

There are 0 answers