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)