component module import problem

[stray zephyr]

Hello when creating a component i seem to have run into a little issue
where i need to re-use the same component on 2 different pages
but now the problem is that those 2 pages are not part of the same module
so if i try include the component in both modules angular will complain about it

but if i include it in 1 module
i can not use the component in the other page

module A: is just the app.module
module B: is a separate module but is used in the imports of the app.module

[simple tide]

you can create a folder : shared
you put there the components that are in common

[molten sundial]

Angular will complain if declare the same component twice, not if you import it.

[stray zephyr]

module B: This import contains errors, which may affect components that depend on this NgModule.
doesn't happen if the component is not declared there

[stray zephyr]

yeah sorry about that, i meant declare

i usually call declare and import the same 😅

but how do i solve it tho

[limpid cedar]

• SharedFooComponentModule: must declare and export the shared FooComponent
• AModule: must import SharedFooComponentModule to use FooComponent
• BModule: must import SharedFooComponentModule to use FooComponent

Event better solution: make FooCOmponent a standalone component, and import that standalone component in AModule and BModule.

[stray zephyr]

standalone seems to be a v14 thing
i'm running V13 here so gues option A it is

[limpid cedar]

Or upgrading to Angular 14. Why stay on an old release? You'll have to upgrade at some point anyway, so why not now?

[stray zephyr]

ng-bootstrap does not support 14 yet

well when i started at least...

[limpid cedar]

Yes, it does. https://ng-bootstrap.github.io/#/getting-started

[stray zephyr]

yeah i see, but back then t didn't
i'm going to upgrade once this entire thing is complete then i gues

[limpid cedar]

If you prefer making your own life more complex than it could be...

[stray zephyr]

well how hard is upgrading then?
and how?

[limpid cedar]

https://update.angular.io/

[stray zephyr]

trying to use standalone but getting
This syntax requires an imported helper but module 'tslib' cannot be found.

[limpid cedar]

Add tslib to your dependencies then.

[stray zephyr]

ah it is a npm pack then

after installing it and doing a restart of vscode
because somehow vscode has this caching bug

that seesm to solved the problem thx

[stray zephyr]

as declaration
or the imports?

[limpid cedar]

Is FooComponent standalone? If so, then you need to import it in all the modules that use it. If not, you need to do what I said here: #1031541491849506846 message

[stray zephyr]

so you literally meant the imports []
instead of import like how i like to use the term
as in import { name } from '...'

correct?

[limpid cedar]

Yes import = add to the NgModule imports. export = add to the NgModule exports. declare = add to the NgModule declarations. TypeScript imports have nothing to do with Angular. they're needed by the TypeScript compiler to know where to find the classes, functions and variables you're using.

[stray zephyr]

ah ok great thank you ❤️