3

My structure is as follows : 

App
    *component, module, template*
    Component 1
        *component, module, template*
        Component 11
            *component, module, template*
    Global Component
        *component, temaplte, BUT NO MODULE*

My App module contains the component 1 and component 11 modules. I declared the global component in the app module, so that I can use it in all my other components. I also exported it in app module.

But when I use the selector in the component 11 template, the console says not a known element.

I tried importing it in my other components but it says it's already imported, and that I should import it in a higher module.

Could you tell me how to declare a component so that it can be used in child templates ?

  • could you post some codes ? at least those module files .. – SeleM Jan 02 '17 at 11:04
  • Can you check if the module of the App component exports the Global component, and if the module of Component 11 imports the module of the App Component? – Davy Jan 02 '17 at 11:22
  • Sorry @5313M, I can't, stack says I have an indent problem in my code, even though I clearly don't have one (my code is 4 spaces indented) –  Jan 02 '17 at 11:24
  • @Davy the app module exports the component, but the C11 module declares the component. If I import it, it says `unknon directive [Global component]` –  Jan 02 '17 at 11:25

2 Answers2

3

I'd assume "global components" are not known in the angular 2 architecture. See also here ==> https://angular.io/docs/ts/latest/guide/architecture.html

From experience I know that it can be a problem if components (e.g. pipes) are imported at the app.module level. When doing this with a pipe for example you get a "pipe not found" error. Maybe you encounter a similiar problem with your component.

So I'd recommend to make your component part of a module and then import your module in your app.module instead of the component.

Karl
  • 3,099
  • 3
  • 22
  • 24
  • Sorry for misusing words but it appears clearer for me with that. And the point is that I want my component to be used in several modules, will it be possible if I only import it in a deep module instead of the root module ? –  Jan 02 '17 at 11:19
  • 2
    I think you would be better of if you introduced a "SharedModule" for such global components (as Karl suggested) – Davy Jan 02 '17 at 11:23
  • 1
    I've used a "toolmodule" for that reason – Karl Jan 02 '17 at 11:24
  • Ok so the point is to make a new module that I will use into the other modules ? –  Jan 02 '17 at 11:25
  • Ok I did it and now I have code errors, but it seems to work. I didn't know that this was the right way to do it. Thank you all ! –  Jan 02 '17 at 11:30
0

One thing you can do to easily use components in different modules is to create a module for your component(s) and declare your component(s) in that module and also add them to the exports array of the module, then whenever you want to use the component(s), just import that module in the module you want to use the component(s).

Sinandro
  • 2,426
  • 3
  • 21
  • 36