1

I'm trying to come up with a simple use case for private components and here it it. Suppose I have the module HelloWorldAppModule with one public and one private component:

@Component({
    selector: 'hello-world',
    template: `
    <div>
        <private></private>
    </div>`
})
class HelloWorldComponent {
}

@Component({
    selector: 'private',
    template: `<span>I am private</span>`
})
class PrivateComponent {
}


@NgModule({
    declarations: [HelloWorldComponent, PrivateComponent],
    exports: [HelloWorldComponent]
})
class HelloWorldAppModule {
}

As you can see, this module exports only HelloWorldComponent, however, inside the template of HelloWorldComponent the PrivateComponent is used. This should work fine, since both components are registered in declarations.

Then, I create another module UsesHelloWorldModule that imports HelloWorldAppModule and so, as I understand, I can use components exported by it in templates of directives registered within HelloWorldAppModule. So here it is:

@Component({
    selector: 'uses-hello-world',
    template: `<hello-world></hello-world><private></private>`
})
class UsesHelloWorldComponent {
}

@NgModule({
    imports: [HelloWorldAppModule],
    declarations: [UsesHelloWorldComponent],
})
class UsesHelloWorldModule {
}

However, I also used <private> component from the HelloWorldAppModule that was not exported. So what's going to happen? Am I right that angular is going to throw an error when parsing the <private></private> tag?

EDIT:

Also, what will happen if only is used inside UsesHelloWorldComponent:

@Component({
    selector: 'uses-hello-world',
    template: `<hello-world></hello-world>`
})
class UsesHelloWorldComponent {
}

Please note that it uses <private> inside its template.

Appreciate any comments as there is not much examples of private components on the web.

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488

1 Answers1

2

<private></private> should cause an error about missing CUSTOM_ELEMENTS_SCHEMA. If you proveded CUSTOM_ELEMENTS_SCHEMA to be able to use custom tags that are not Angular components, then you won't get an error, unless you also add bindings like <private [prop]="value"> - which will cause an error because <private> won't have a prop property when it's not a PrivateComponent

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • thanks, and if I don't use `` inside `UsesHelloWorldComponent` template, the `` component will still be rendered with `` inside its template without an error, correct? – Max Koretskyi Jan 12 '17 at 17:07
  • Yes, but only as custom HTML element, not an Angular component (I hope I correctly understand your comment) – Günter Zöchbauer Jan 12 '17 at 17:11
  • Probably I didn't state the question clearly. If you look at `UsesHelloWorldComponent` template, you can see that `` is used inside of it. This should work fine, because `HelloWorldAppModule` exports `HelloWorldComponent`. However, inside of `` the `` component is used, which is not exported. What's going to happen then? I edited the question to show that – Max Koretskyi Jan 12 '17 at 17:15
  • I still have troubles to get your point. If it is used inside `` then a component will be generated of the `` element, no matter where you use an exported component (inside or outside of the module where it's declared), its content will always be the same. – Günter Zöchbauer Jan 12 '17 at 17:34
  • Thanks, so basically, the components defined in a module and not exported **can only be used in templates** of components that are defined in this module, correct? – Max Koretskyi Jan 12 '17 at 18:02
  • appreciate, just wondering if there is any difference with [dynamically created components](http://blog.rangle.io/dynamically-creating-components-with-angular-2/) – Max Koretskyi Jan 12 '17 at 18:10
  • I'm quite sure it's the same. – Günter Zöchbauer Jan 12 '17 at 18:12