Angular 2 global component

Question

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 ?

Answer 1

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.

Answer 2

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).