#Re-export on standalone components from another file returns undefined

10 messages · Page 1 of 1 (latest)

void thunder
#

In my Angular v16 and Ionic v7 project I've come to a point where I defined lots of shared classes, types, directives, pipes and services. With everything being standalone I've encountered the issue where my component files would reach almost 15 lines of just imports, which I've tried to fix and make more concise by re-exporting them from certain files. What I mean is I have my standalone components shared/components/foo and shared/components/bar which I've re-exported from shared/components.ts. Although that solution seemed absolutely harmless it completely messes up how angular imports those same components into other parts of my application. Any reason behind this? I don't know if it is a bug since I haven't found anywhere, and by the way I would not like to make use of modules for this case.

sacred tundra
#

without knowing your exact project structure, it sounds to me like a circular import issue.

void thunder
#

My project is inside the src/app folder where it is possible to find folders where many components lie. In this src/app you can find an home/ directory, a modules/ directory where different pages of my application with different features are, then there’s the shared folder which is the one above.

#

although I hardly believe this could be an issue of where parts of my application are since I’m working with standalone components.

#

Also I haven’t mentioned the error which I see when using the solution in the beginning of this post, which is a TypeError with a WEBPACK_IMPORTED_MODULE{number} being undefined

void thunder
#

Apparently the issue was that I've used an object to export instead of an array 🥲. I completely forgot about JS shorthand syntax for object keys, but nonetheless i was using the wrong data structure. Nonetheless now the result is almost identical from a module with the only difference that it's just an array of standalone components.

#

It looks something like this

#

The only concern i have is the performance of importing the whole array of components (possibly, i don't know how angular handles this specific case) . I don't know if it would make my components load slower, but the size of the build remained the same even if i replace SharedComponents with ModuleItemComponent

#

Also, one thing I do not quite understand is why this issue is only caused by Angular specific classes like @Components or @Directives, because that same way I exported those classes using objects, I also exported in the same way types. So whenever I try to import those types with an import like the one below, there's no error. So I'm also curious as to why Angular does not like having standalone parts being exported with export { ... } instead of export const foo = [ ... ]

void thunder
#

I've tried to refactor the imports, the issue I've reported above is only limited to @Components, for some reasons directives, pipes, services, types and classes do not produce any errors if exported in one of the following methods.

export { LuogoMap } from './classes/luogo-map';
export { ModuleItem } from './classes/module-item';
// OR
export * from './types/wp-attachment.types'
// ...
export * from './types/module-item-extras.types';