Angular Transclusion: X is not a known element

Question

I am following a few good posts about angular transclusion to make a wizard component. I have a Wizard component that takes WizardStep components. The issue I am having is the to-be-transcluded element in my Wizard template (wizard-title) is :

Unhandled Promise rejection: Template parse errors:
'wizard-title' is not a known element:
1. If 'wizard-title' is an Angular component, then verify that it is part of this module.
2. If 'wizard-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I know the error above is pretty clear, but is this a web component?

Some code:

`wizard.component.html`

(the wrapper element, selector: reg-wizard):

<md-card>
  <md-card-header>
    <ng-content select="wizard-title"></ng-content> 
  </md-card-header>
  <md-card-content>
    <ng-content select="reg-wizard-step"></ng-content> <!-- STEPS, corresponds to another component -->
  </md-card-content>
</md-card>

`wizard-step.component.html`

(the repeated element, selector: reg-wizard-step):

<md-card>
  <md-card-header>
    <ng-content select="wizard-step-header"></ng-content>
  </md-card-header>
  <md-card-content>
    <ng-content select="wizard-step-content"></ng-content>
  </md-card-content>
</md-card>

test implementation (in `app.component.html`):

<reg-wizard>
  <wizard-title>Title</wizard-title>

  <reg-wizard-step>
    <wizard-step-header>Step 1</wizard-step-header>
    <wizard-step-content>
      <p>some paragraph in step 1</p>
      <button md-raised-button>next</button>
    </wizard-step-content>
  </reg-wizard-step>

  <reg-wizard-step>
    <wizard-step-header>Step 2</wizard-step-header>
    <wizard-step-content>
      <p>some paragraph in step 2</p>
      <button md-raised-button>finish</button>
    </wizard-step-content>
  </reg-wizard-step>
</reg-wizard>

Expected Output:

<md-card>
  <md-card-header>
    Title
  </md-card-header>
  <md-card-content>

    <md-card>
      <md-card-header>
        Step 1
      </md-card-header>
      <md-card-content>
        <p>some paragraph in step 1</p>
        <button md-raised-button>next</button>
      </md-card-content>
    </md-card>

    <!--some functions / css will hide step 2 until it is needed...-->
    <md-card>
      <md-card-header>
        Step 2
      </md-card-header>
      <md-card-content>
        <p>some paragraph in step 1</p>
        <button md-raised-button>next</button>
      </md-card-content>
    </md-card>

  </md-card-content>
</md-card>

My versions:

@angular/cli: 1.0.0
node: 7.7.3
os: darwin x64
@angular/animations: 4.1.0
@angular/common: 4.1.0
@angular/compiler: 4.1.0
@angular/core: 4.1.0
@angular/forms: 4.1.0
@angular/http: 4.1.0
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.1.0
@angular/platform-browser-dynamic: 4.1.0
@angular/router: 4.1.0
@angular/cli: 1.0.0
@angular/compiler-cli: 4.1.0

It probably should have it's own module at some point, but I declared both components in the `app.module` — Jeff, Apr 28 '17 at 13:09
you should add it's own module to `includes` in your App's module. — SrAxi, Apr 28 '17 at 13:10
Try posting the code of the wizard's module and component. Same for modules and components related to it (your app, your view, etc...). So we can help you! :D — SrAxi, Apr 28 '17 at 13:16

score 4 · Accepted Answer · edited May 23 '17 at 12:02

Once again, Angular's error messages are pretty clear and helpful here. This answer pointed me in the right direction.

If 'wizard-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I didn't know this, but those transcluded elements seemed to be Web Components. Adding

schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

To my app module seems to have solved this; however, I don't know why the examples in the blog post didn't have to have this.

It also looks like you can create your own directive for these suggested here:

@Directive({selector: 'my-component-title, my-component-content'})
class MyComponentTags{ }

export const MY_COMPONENT_DIRECTIVES = [ MyComponent, MyComponentTags ];

In my case, it has nothing to do with Web Components. But `schemas: [ CUSTOM_ELEMENTS_SCHEMA ]` helped as well! Maybe this schema is more general than just for Web Components? — KarolDepka, Aug 05 '17 at 22:09

Angular Transclusion: X is not a known element

wizard.component.html

wizard-step.component.html

test implementation (in app.component.html):

Expected Output:

1 Answers1

`wizard.component.html`

`wizard-step.component.html`

test implementation (in `app.component.html`):