0

After a long search on this pages, I am still lost.

I have an AppModule and an ModalModule. AppModule is importing ModalModule

AppModule declares LoaderComponent with this decorator attributes:

selector: 'my-loader', template: '<div>...</div><ng-content></ng-content>'

ModalModule declares ModalComponent.

Inside the template of ModalComponent I want to use LoaderComponent:

<my-loader><h3>Loading...</h3><p>Just information text.</p></my-loader>

And this does not work!

'my-loader' is not a known element:
1. If 'my-loader' is an Angular component, then verify that it is part of this module.
2. If 'my-loader' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

If I add CUSTOM_ELEMENTS_SCHEMA to ModalModule, it just ignores the element and the DOM looks like this:

<my-loader>
  <h3>Loading...</h3>
  <p>Just information text.</p>
</my-loader>

But I want it to be rendered by angular and look like this:

<my-loader>
  <div>...</div> <!-- should be coming from LoaderComponent template -->
  <h3>Loading...</h3>
  <p>Just information text.</p>
</my-loader>

Does somebody have an idea?

weihs.th
  • 49
  • 5
  • Right after my post, I found this and will try it: https://stackoverflow.com/questions/39906949/angular2-how-to-clean-up-the-appmodule/39907757#39907757 – weihs.th Jul 27 '17 at 09:12

1 Answers1

0

Cleaning up and using a SharedComponent helped!

Angular2 How to clean up the AppModule

Only difference, I had to do, is adding CommonModule and FormsModule to the imports of SharedModule!

weihs.th
  • 49
  • 5